安装“react-infinite-scroller”并启动反应服务器时出错

Question

当我“react-infinite-scroller”并启动反应服务器时，Webpack 加载器出错。

我已经安装了“react-infinite-scroller”来在项目中构建聊天应用程序。安装软件包后，我启动了服务器，并在浏览器中看到此错误。

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,

以下是我安装此软件包时执行的步骤 -

1. npm 我反应无限滚动
2. @types/react-infinite-scroller
3. npm 启动

然后在浏览器中我看到这个错误。

这是我的 webpack 和 babel 配置。

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

这就是我尝试使用图书馆的方式。

应用程序.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>

有关环境设置的更多信息。

反应版本=>“反应”：“^16.14.0”， 节点版本=> v14.20.0，

请建议我该怎么办？

Answer 1

你的依赖关系已经很老了。 Node v14.20.0 是 2022 年的版本，React 16.14.0 是 2020 年的版本。您没有分享您的 Webpack 版本，但我怀疑它也已经过时了。

Webpack需要解析导入的js文件。您将 Webpack 配置为在从

node_modules

导入时不使用 Babel，但该文件的语法使用的语言功能对于您过时的 Webpack 版本来说太新了。

我建议您更新您的项目（特别是 Webpack）。如果这不是一个选项，您也可以转译从

node_modules

加载的文件，但这会增加您的构建时间。

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

您可以尝试不排除

node_modules

，但如果您确实无法更新依赖项，则应该考虑使用专门针对 node_modules 的自定义

slim

babel 配置（例如没有

styled-components

）。