没有合适的加载器来处理js WebPack的babel加载器

Question

绑定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"
}
]
]
}

package.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'文件中，我试图将'loader'更改为'use'，同样的事情…

import ReactDOM from 'react-dom'和ReactDOM.render()也是一样的…

Answer 1

webpack.config.js在目录结构的错误位置。