Error when I install "react-infinite-scroller" and start the react server

Question

Webpack loaders error when I "react-infinite-scroller" and start the react server.

I have installed "react-infinite-scroller" for building up a chat application in project. after installing the package I started the server and I see a this error in browser.

ERROR in ./node_modules/react-infinite-scroller/src/InfiniteScroll.js 5:19
Module parse failed: Unexpected token (5:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export default class InfiniteScroll extends Component {
>   static propTypes = {
|     children: PropTypes.node.isRequired,
|     element: PropTypes.node,

Here are the steps I did when I installed this package -

1. npm i react-infinite-scroller
2. @types/react-infinite-scroller
3. npm start

then in the browser I see this error.

Here are my webpack and babel configs.

webpack.js

module.exports = options => ({
  mode: options.mode,
  entry: options.entry,
  output: {
    // Compile into js/build.js
    path: path.resolve(process.cwd(), 'dist'),
    publicPath: '/',
    ...options.output
  }, // Merge with env dependent settings
  module: {
    rules: [
      {
        test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery
        }
      },
      {
        test: /\.ts(x?)$/, // Transform typescript files with ts-loader
        exclude: /node_modules/,
        use: options.tsLoaders
      },
      {
        // Preprocess our own .css files
        // This is the place to add your own loaders (e.g. sass/less etc.)
        // for a list of loaders, see https://webpack.js.org/loaders/#styling
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader']
      },
      {
        // Preprocess 3rd party .css files located in node_modules
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.(mp4|webm)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      }
    ]
  },
  plugins: options.plugins.concat([
    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; Terser will automatically
    // drop any unreachable code.
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development'
    })
  ]),
  resolve: {
    modules: ['node_modules', 'app'],
    extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx'],
    mainFields: ['browser', 'jsnext:main', 'main']
  }
});

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  plugins: [
    'styled-components',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ],
  env: {
    production: {
      only: ['app'],
      plugins: ['lodash']
    },
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs', 'dynamic-import-node']
    }
  }
};

and this is how I am tring to use the library.

App.tsx

import InfiniteScroll from 'react-infinite-scroller';

<InfiniteScroll
        style={{
          paddingBottom: '32px'
        }}
        height="100%"
        loadMore={fetchChats}
        hasMore={hasMoreData}
        loader={() => (
          <Stack sx={{ margin: '16px auto', display: 'flex', justifyContent: 'center' }}>
            <Circular color="P-50" size={24} />
          </Stack>
        )}
        useWindow={false}
        isReverse
        initialLoad={false}
      >
        <>
        </>
      </InfiniteScroll>

More about the environment settings.

react version => "react": "^16.14.0", node version => v14.20.0,

Please suggest me what should I do?

Answer 1

Your dependencies are pretty old. Node v14.20.0 is from 2022 and React 16.14.0 is from 2020. You didn't share your Webpack version, but I suspect it's outdated as well.

Webpack needs to parse imported js files. You configured Webpack not to use Babel, when importing from node_modules, but the Syntax of that file uses language features too new for your outdated Webpack version.

I recommend you update your project (specifically Webpack). If that's not an option, you can transpile files loaded from node_modules as well, but that'll increase your build times.

{
  test: /\.jsx?$/,
  // ↓ This excludes external dependencies
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: options.babelQuery
  }
},

You could try not excluding node_modules, but if you really can't update the dependencies, you should look into using a custom slim babel config specifically for node_modules (for example without styled-components).