安装react-infinite-scroller后启动React服务遇Webpack Loader错误求助

为聊天应用安装react-infinite-scroller后启动服务报错，操作步骤：

• 执行 npm i react-infinite-scroller
• 安装 @types/react-infinite-scroller
• 执行 npm start

报错信息 #

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,

配置文件 #

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']
    }
  }
};

组件使用代码（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>

环境信息 #

• react版本："react": "^16.14.0"
• node版本：v14.20.0

错误核心原因是webpack配置中babel-loader排除了所有node_modules文件，但react-infinite-scroller源码使用了未转译的ES6+语法（类属性写法static propTypes = {}），导致webpack无法解析。以下是三种解决方式：

方式一：修改webpack配置，让babel-loader处理该库 #

修改webpack中.jsx?$的规则，将react-infinite-scroller从排除列表中移除，让babel-loader转译这个包：

{
  test: /\.jsx?$/,
  exclude: /node_modules(?!\/react-infinite-scroller)/, // 调整排除规则
  use: {
    loader: 'babel-loader',
    options: options.babelQuery
  }
}

方式二：直接引入预编译版本 #

react-infinite-scroller的npm包提供了预编译后的文件，替换导入语句即可：

import InfiniteScroll from 'react-infinite-scroller/lib/InfiniteScroll';

方式三：更换库版本 #

安装该库的旧版本（已预编译），执行以下命令：

npm uninstall react-infinite-scroller
npm install react-infinite-scroller@1.2.6

内容的提问来源于stack exchange，提问作者Rahul Ramshrey Chauhan