Node.js 第一次运行客户端react应用程序后如何修复错误?
我正在尝试运行客户端应用程序react,但babel中出现错误,有人能帮我修复吗 这是我的错误:Node.js 第一次运行客户端react应用程序后如何修复错误?,node.js,reactjs,babeljs,Node.js,Reactjs,Babeljs,我正在尝试运行客户端应用程序react,但babel中出现错误,有人能帮我修复吗 这是我的错误: ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/ivo/Área de Trabalho/
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/ivo/Área de Trabalho/client/node_modules/babel-preset-react/lib/index.js
我相信这可能是我的cli中过时的babel版本中的一个问题。我用的是巴别塔6.24。
在过去,我试图改变巴别塔的版本,但没有成功
这是我的:package.json
{
"name": "client",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.40.2",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"history": "^4.10.1",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.1.1",
"redux": "^4.0.4"
},
"description": ""
}
这是我的webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'babel-polyfill',
'./src/index.js',
],
output: {
publicPath: '/',
filename: './main.js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: {
loader: 'file-loader',
options: {
name: 'public/img/[name].[ext]',
outputPath: 'dist/img/',
},
},
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{ loader: 'css-loader', options: { minimize: true } }, 'sass-loader'],
}),
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
minimize: true,
},
},
},
{
test: /\.(otf|ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
name: 'public/fonts/[name].[ext]',
outputPath: 'dist/fonts',
},
},
],
},
plugins: [
new ExtractTextPlugin({ filename: 'style.css' }),
new HtmlWebpackPlugin({
template: './resources/index.html',
filename: './index.html',
hash: true,
}),
],
devServer: {
historyApiFallback: true,
publicPath: '/',
contentBase: './dist',
},
};
这是我的。巴别塔LRC:
{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread"]
}
我希望当我执行命令npm start时,预期结果将出现在我的浏览器中:hello world我认为您使用的是babel loader:^8.0.6和babel 6.x-您应该使用babel loader 7.x,但我建议将babel升级到7
现在,请尝试将package.json中的babel加载程序降级为^7.1.5-重新安装软件包,看看这是否能解决该错误。是否可以发布您的网页包配置文件,如果有,请发布babelrc。我已按要求添加了内容。