没有为 node_modules 配置加载器 |网络包+巴别塔
No loaders configured for node_modules | webpack + babel
我正在尝试从我的项目中声明为 devDependency 的模块加载 JSX 组件。但是,在 运行 webpack 上,我收到以下错误:
Module parse failed: Unexpected token (70:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
|
| render(
> <Provider store={store}>
| <MyApp />
| </Provider>,
@ ./src/App.js 48:43-96
@ ./src/index.js
我正在使用 webpack 4 和 babel 7。
webpack 依赖项:
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"dummy-pkg": "file:../dummy-pkg",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.2",
"sass-loader": "^8.0.0",
"style-loader": "^0.16.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.10"
}
webpack 配置:
module: {
rules: [
{
test: /\.jsx?$/,
include: [path.resolve(__dirname, './src'), /node_modules\/dummy-pkg/],
use: 'babel-loader'
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
babelrc
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
当我尝试从 dummy-pkg
导入组件时,它失败并显示我上面提到的错误消息。
如果我删除导入,我当前项目中声明的所有其他 JSX 组件都会正确转译。引入这个会导致所有问题。
我一直在查看有关 Stack Overflow 的许多其他问题以及一些 GitHub 问题。那里建议的解决方案似乎不适合我。
任何帮助将不胜感激。
TIA!
更新
经过一番调试,发现需要在babel.config.json
中定义babel config
令人惊讶的是,我注意到当您在 .babelrc
中提供 presets
时,如果您想要从 node_modules
中排除任何内容,它就无法正常工作,但是当我放置预设时在我的 webpack.config
中,它像 gem 一样工作。所以我建议尝试保持 js or jsx
的规则如下所示并测试
{
test: /\.(js|jsx)$/,
exclude: [/node_modules\/dummy-pkg/],
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
"@babel/plugin-proposal-class-properties"
]
}
}
}
希望对您有所帮助。
我正在尝试从我的项目中声明为 devDependency 的模块加载 JSX 组件。但是,在 运行 webpack 上,我收到以下错误:
Module parse failed: Unexpected token (70:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
|
| render(
> <Provider store={store}>
| <MyApp />
| </Provider>,
@ ./src/App.js 48:43-96
@ ./src/index.js
我正在使用 webpack 4 和 babel 7。
webpack 依赖项:
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"dummy-pkg": "file:../dummy-pkg",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.2",
"sass-loader": "^8.0.0",
"style-loader": "^0.16.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.10"
}
webpack 配置:
module: {
rules: [
{
test: /\.jsx?$/,
include: [path.resolve(__dirname, './src'), /node_modules\/dummy-pkg/],
use: 'babel-loader'
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
babelrc
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
当我尝试从 dummy-pkg
导入组件时,它失败并显示我上面提到的错误消息。
如果我删除导入,我当前项目中声明的所有其他 JSX 组件都会正确转译。引入这个会导致所有问题。
我一直在查看有关 Stack Overflow 的许多其他问题以及一些 GitHub 问题。那里建议的解决方案似乎不适合我。
任何帮助将不胜感激。 TIA!
更新
经过一番调试,发现需要在babel.config.json
令人惊讶的是,我注意到当您在 .babelrc
中提供 presets
时,如果您想要从 node_modules
中排除任何内容,它就无法正常工作,但是当我放置预设时在我的 webpack.config
中,它像 gem 一样工作。所以我建议尝试保持 js or jsx
的规则如下所示并测试
{
test: /\.(js|jsx)$/,
exclude: [/node_modules\/dummy-pkg/],
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
"@babel/plugin-proposal-class-properties"
]
}
}
}
希望对您有所帮助。