CODEWITHSUNDEEP
react-nativewebpackreact-native-web
Steven Matthews
Steven Matthews

Reputation: 11285

Failed to compile on React Native Web

I am trying to render a calendar from https://github.com/wix/react-native-calendars

I am getting a failed to compile error:

./node_modules/react-native-calendars/src/expandableCalendar/asCalendarConsumer.js
Module parse failed: Unexpected token (11:8)
You may need an appropriate loader to handle this file type.
|     render() {
|       return (
|         <CalendarContext.Consumer>
|           {(context) => (
|             <WrappedComponent

I think is based on my webpack setup:

// webpack.config.js
module.exports = {
    plugins: ["@babel/plugin-syntax-dynamic-import"],

    resolve: {
        alias: {
            'react-native$': 'react-native-web'
        },
    },
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                presets: ['babel-preset-env', 'babel-preset-stage-0'],
                plugins: ["@babel/plugin-syntax-dynamic-import"],
            }
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
                presets: ['babel-preset-env', 'babel-preset-stage-0'],
            }
        },
        {
            test: /\.ttf$/,
            loader: "url-loader", // or directly file-loader
            include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
        },
    ]
}

But I am not really an expert on webpack.

The library seems to work with React Native Web - so what am I doing wrong that is causing me to not have it work with my setup?

Upvotes: 2

Views: 1231

Answers (1)

Iosvany Dalmau
Iosvany Dalmau

Reputation: 98

Found the solution. Make sure to INCLUDE it in babel-loader. To fix it do the following:

1- Make sure to include the package folder in the babelLoader configuration in webpack.config.js as

include: [path.resolve(appDirectory, 'node_modules/react-native-calendars'), ...]

NOTE: Don't forget to also include all the directories that require babel-loader.

2- (Might need it)- You might need to go to node_modules/react-native-calendars/src/calendar/index.js and to node_modules/react-native-calendars/src/agenda/index.js and REMOVE the propTypes declarations and the ViewPropTypes import from react-native on lines 2, 20, and 32 on both files. Here's how */agenda/index.js is supposed to look like. Until the devs fix this, avoid updating the package or you will lose the changes. (I am including this because it happened to me right after step 1 so just in case) https://gist.github.com/iosvanyd1/abd18bd35ce3fdcb635100ce5d5b0beb

Upvotes: 1

Related Questions