reactjs - 没有合适的加载器来处理 js WebPack babel-loader
问题描述
我收到关于捆绑 JSON 数据的意外错误。我尝试使用 json-loader 来捆绑 json,但在那里遇到了同样的错误。
ERROR in ./src/index.js 6:7
Module parse failed: Unexpected token (6:7)
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
| import data from './data/recipes.json';
|
> render(<Menu recipes={data} />, document.getElementById('root'));
webpack 5.53.0 compiled with 1 error in 82 ms
./src/index.js
import React from 'react';
import { render} from 'react-dom';
import Menu from './components/Menu';
import data from './data/recipes.json';
render(<Menu recipes={data} />, document.getElementById('root'));
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist', 'assets'),
filename: 'bundle.js'
},
module: {
rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }]
}
};
.babelrc
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}
包.json
{
"name": "recipes-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"serve": "^12.0.1"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0"
}
}
在“webpack.config.js”文件中,我尝试将“加载器”更改为“使用”,同样的事情......
从 'react-dom' 导入 ReactDOM 和 ReactDOM.render() 也是一样的...
解决方案
webpack.config.js 位于 dir 结构的错误位置。
推荐阅读
- react-native - 如何在 react-native-gifted-chat 中自定义键盘?
- python - 浏览本地 Excel 文件并上传到从 Django 默认用户模型扩展的 Django 数据库模型
- data-structures - 如果返回错误结构的构造函数
- r - 如何将数字转换为分类值?
- javascript - Javascript:Promise.all 和 json() 被记录为“不是函数”的问题
- mysql - docker容器内的mysql数据库名称和凭据未更新
- html - 正确的位置不起作用:绝对 CSS
- javascript - 使用纯 JavaScript 下载 HTML 文件 + 值
- python - 在 kv 文件中使用 py 文件中的十六进制颜色代码
- javascript - Redux 工具包在同一调用中删除一个 id 及其实体