JavaScript-Babel Webpack错误：您可能需要适当的加载程序来处理此文件类型

我试图像这样延迟加载一些React组件：

节点：v10.15.2

const Library = React.lazy(() => import('./components/Library'))`

我的错误：

Module parse Failed: Unexpected token (51:9)
You may need an appropriate loader to handle this file type.
|
| var Library = React.lazy(function () {
>   return import('./components/Library');
| });

Webpack配置：

{
  test: /\.js$/,exclude: /node_modules/,use: {
    options: {
      presets: ['@babel/env','@babel/react','@babel/preset-flow'],plugins: [
        '@babel/plugin-transform-runtime','@babel/Syntax-dynamic-import','@babel/plugin-proposal-class-properties','@babel/plugin-Syntax-throw-expressions',],},loader: 'babel-loader?cacheDirectory',

package.json

"dependencies": {
    "@babel/runtime": "^7.1.2","axios": "^0.18.0","babel-cli": "^6.26.0","css-modulesify": "^0.28.0","hls.js": "^0.8.9","moment": "^2.20.1","moment-duration-format": "^2.2.1","prop-types": "^15.6.1","qs": "^6.5.1","react": "^16.8.3","react-collapsible": "^2.6.0","react-dom": "^16.8.3","react-fontawesome": "^1.6.1","react-loadable": "^5.3.1","react-scrollspy": "^3.3.5","react-select": "^1.2.1","react-share": "^2.2.0","react-sticky": "^6.0.1","react-stripe-checkout": "^2.6.3","react-stripe-elements": "^2.0.1","react-transition-group": "^2.3.1","redux": "^3.7.2","smooth-scroll": "^12.1.5","video-react": "^0.9.4"
  },"devDependencies": {
    "@babel/core": "^7.1.2","@babel/plugin-proposal-class-properties": "^7.3.4","@babel/plugin-Syntax-dynamic-import": "^7.2.0","@babel/plugin-Syntax-throw-expressions": "^7.0.0","@babel/plugin-transform-runtime": "^7.1.0","@babel/preset-env": "^7.1.0","@babel/preset-flow": "^7.0.0","@babel/preset-react": "^7.0.0","babel-eslint": "^10.0.1","babel-loader": "^8.0.4","browser-sync": "^2.23.6","browser-sync-webpack-plugin": "^2.0.7","css-loader": "^0.28.10","eslint": "^4.17.0","eslint-config-airbnb": "^16.1.0","eslint-plugin-flowtype": "^2.44.0","eslint-plugin-import": "^2.8.0","eslint-plugin-jsx-a11y": "^6.0.3","eslint-plugin-react": "^7.6.1","flow-bin": "^0.68.0","lodash.assign": "^4.2.0","node-sass": "^4.7.2","sass-loader": "^6.0.7","style-loader": "^0.20.3","stylus": "^0.54.5","uglifyjs-webpack-plugin": "^1.2.2","webpack": "^4.1.1","webpack-bundle-analyzer": "^2.11.1","webpack-cli": "^3.1.2"

我在这里做错什么事吗？

最佳答案

我找到了！

https://github.com/webpack/webpack/issues/8656#issuecomment-456061673

remove node_modules

remove package-lock.json

npm install

npm update acorn –depth 20

npm dedupe

并确保橡子@ ^ 6.0.0

它帮助了我