Babel Webpack 错误:您可能需要适当的加载器来处理此文件类型

Posted

技术标签:

【中文标题】Babel Webpack 错误:您可能需要适当的加载器来处理此文件类型【英文标题】:Babel Webpack Error: You may need an appropriate loader to handle this file type 【发布时间】:2019-07-26 21:06:34 【问题描述】:

我正在尝试像这样延迟加载一些 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"

这里有什么明显我做错的地方吗?

【问题讨论】:

检查节点版本 @Revansiddh v8.11.1 您是否尝试过将您的 'syntax-dynamic-import' 更改为 '@babel/plugin-syntax-dynamic-import'? 我遇到了类似的问题,刚刚使用 nvm 将节点更新到 10.15,并修复了该问题 @Revansiddh 使用 nvm,更新到 10.5.2,并将 syntax-dynamic-import 更新为 `@babel/plugin-syntax-dynamic-import',仍然无法正常工作???? 【参考方案1】:

我找到了!

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

删除节点模块

删除 package-lock.json

npm 安装

npm update acorn --depth 20

npm 重复数据删除

并确保acorn@^6.0.0

它帮助了我

【讨论】:

以上是关于Babel Webpack 错误:您可能需要适当的加载器来处理此文件类型的主要内容,如果未能解决你的问题,请参考以下文章

webpack 出错 - 您可能需要适当的加载器来处理此文件类型

无法在 react-native-web 上运行 webpack-dev-server。错误:您可能需要适当的加载程序来处理此文件类型

React / Webpack - “模块解析失败:意外令牌 - 您可能需要适当的加载程序来处理此文件类型。”

Webpack 警告:您可能需要适当的加载程序来处理此文件类型(date-nfs)

如何解决此错误您可能需要适当的加载程序来处理此文件类型

现有的React项目中的实现Babel /打字稿