你好，我尝试在其他问题中搜索，但我尝试的解决方案都对我无效。
当使用以下命令时：
npm start
我遇到了一个错误：
ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: D:/Kodilla/Projekty/webpack-to-do-app/src/index.js: Unexpected > token (6:4)
5 | ReactDOM.render( 6 | <App />, | ^ 7 | document.getElementById('app') 8 | );
在 package.json 中定义的命令为：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
index.js文件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
App.js文件：
import React from 'react';
import uuid from 'uuid';
import style from './App.css';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: []
};
}
addTodo(val){
const todo = {
text: val,
id: uuid.v4(),
};
const data = [...this.state.data, todo];
this.setState({data});
}
removeTodo(id) {
const remainder = this.state.data.filter(todo => todo.id !== id);
this.setState({data: remainder});
}
render() {
return (
<div className={style.TodoApp}>
Tutaj pojawią się komponenty naszej aplikacji.
</div>
);
}
}
export default App;
webpack.config.js文件：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
.babelrc文件：
{
"presets": [
["env", "react"]
]
}
编辑: 我尝试了你建议的帖子中提供的解决方案，但是我直接复制并没有起作用。我将我的webpack配置更改为：
module: {
loaders: [...
{
test: /\.(js|jsx)?$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}]
},
问题仍然存在。我认为我可能在其他地方做错了，而不是在提到的示例中。
编辑2：
1. 我使用babel-core@6.26.3和babel-loader@7.1.5，因为这些是项目要求。 2. 安装了React和react-dom依赖项。 3. 通过“npm install babel-preset-... --save-dev”安装了预设：react、env、es2015、stage-0。 4. 第一次建议的.babelrc配置已完成: "presets": ["react", "es2015", "stage-0"]。 5. 错误出现:
Couldn't find preset "@babel/preset-env" relative to directory "...webpack-to-do-app\node_modules\css-loader"
我还做错了什么？
问题已解决。
以下内容有助于解决问题： 1. 将预设从babel-env、babel-react更新为@babel/preset-env和@babel/preset-react。已安装@babel-core，但babel-core保留在原处。最终设置：
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"css-loader": "^2.1.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
},
2. 卸载并重新安装babel-loader，它会引起错误的babel版本要求问题。 @Alireza，你的建议部分正确。感谢你的帮助。