您好,我尝试搜索其他问题,但我尝试过的上述解决方案均不适合我。
使用命令时:
npm开始
我有一个错误:
./src/index.js中的错误模块构建失败(来自./node_modules/babel- loader/lib/index.js):语法错误:D:/ Kodilla / Projekty / webpack-to-do-app / src / index。 js:意外>令牌(6:4) 5 | ReactDOM.render( 6 | <App />, | ^ 7 | document.getElementById('app') 8 | );
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"] ] }
链接到存储库
编辑: 我从帖子中尝试了解决方案,建议您复制但1:1复制对我不起作用。我将webpack配置更改为:
module: { loaders: [... { test: /\.(js|jsx)?$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] },
而且问题仍然存在。我认为我可能在提到的示例之外的其他地方做错了。
编辑2:
npm install babel-preset -… –save-dev。
“预设”:[“反应”,“ es2015”,“ stage-0”]
找不到相对于目录“ … webpack-to-do-app \ node_modules \ css-loader”的预设“ @ babel / preset-env”
我仍然在做什么错?
问题解决了。
有帮助的事情: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,您的建议部分正确。感谢您的帮助。
请考虑将以下配置放在您的.babelrc上
{ "presets": ["react", "es2015", "stage-0"] }
它应该工作。我也看到你在“预设”中嵌套了数组。每个预设都应该是预设元素之一。
并且我强烈建议您使用最新的babel(版本7)。当您升级到babel 7时,您应该下载@babel/preset- react,@babel/preset-env并且这样就足够了。和.babelrc将如下所示:
@babel/preset- react
@babel/preset-env
{ "presets": [ "@babel/react", "@babel/env" ] }