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 - “模块解析失败:意外令牌 - 您可能需要适当的加载程序来处理此文件类型。”