You may need an appropriate loader

[haveamission]

Description

Getting "You may need an appropriate loader"

Expected Behavior

Module will load

Observed Behavior

The error shows as such:

./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

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars:
• npm ls react-native:

[email protected] [email protected]

Also specify:

1. Phone/emulator/simulator & version:

Web

Here's my webpack, where the issue might be:

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

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

}

[oshimayoan]

Try to exclude nodu_modules/react-native-calendars from your babel-loader.

[iosvanyd1]

Try to exclude nodu_modules/react-native-calendars from your babel-loader.

I am experiencing the same issue. Explicitly excluding it doesn't seem to help. I have an "include" property for babel-loader just for the directories that need it (src, App, index.web.js, etc) but doesnt seem to help.

[iosvanyd1]

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) https://gist.github.com/iosvanyd1/abd18bd35ce3fdcb635100ce5d5b0beb

[oshimayoan]

Interesting. It was the other way around for me. When I include it implicitly, I got the error but not when I exclude it explicitly.

Here is a snippet from my webpack.config.js:

{
  test: /\.js$/,
  exclude: /node_modules[/\\](?!react-native-vector-icons|react-native-safe-area-view|react-native-multi-slider|react-native-calendars|react-native-collapsible)/,
  use: {
    loader: 'babel-loader',
    options: {
      // Disable reading babel configuration
      babelrc: false,
      configFile: false,
      // The configuration for compilation
      presets: [
        ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }],
        '@babel/preset-react',
        '@babel/preset-flow',
        '@babel/preset-typescript',
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-object-rest-spread',
      ],
    },
  },
},

[chenei]

@haveamission is it still occur?

[e-monson]

@haveamission is it still occur?

I can confirm that this still occurs.

[bkmed]

any webpack solution ?