logo标签列表

模块构建失败 - Webpack，React，Babel

javascriptreactjswebpackbabeljsecmascript-2016
11

我正在跟随PluralSight的视频教程，课程名称是《使用React、Flux、Webpack和Firebase构建实时应用程序》。

请查看以下代码和附加的屏幕截图，显示出了我遇到的问题。每当我尝试重新构建文件时，Webpack都会失败。请问有人能够提供可能导致这个问题的建议吗？我目前正在使用所有最新的库。

enter image description here enter image description here

/*webpack.config.js*/

module.exports = {
entry: {
    main: [
        './src/main.js'
    ]
},
output: {
    filename: './public/[name].js'
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        }
    ]
}
}



  /*App.jsx*/
  import React from 'react';

 class App extends React.Component {
 constructor() {
    super();
    this.state = {
        messages: [
            'hi there how are you ?',
            'i am fine, how are you ?'
        ]
    }
}

render() {
    var messageNodes = this.state.messages.map((message)=> {
        return (
            <div>{message}</div>
        );
    });

    return (
        <div>{messageNodes}</div>
    );
 }
 }

 export default App;

/*main.js*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App/>, getElementById('container'));

/*index.html*/
<!DOCTYPE html>
 <html>
  <head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="container"></div>
<script src="public/main.js"></script>
</body>
</html>

/*package.json */

{
"name": "reatapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
"license": "ISC",
 "dependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.0.1",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"webpack": "^1.12.3"
 }
 }
可能是由于 output: { filename: ./public/[name].js} 的问题。尝试添加另一个路径键：path: './public'。但我也看到你的主文件是 main.js，而你的代码在 app.jsx 中。你是否导入了 App from './components/app.jsx';？ - leocreatini
@LeoCreatini你认为是什么问题呢？问题出现在我添加React代码之后。请查看我文件目录的附加截图。 - Erkan Demir
我还看到了render()函数中return ();缺少分号，以及this.state = {}也缺少分号。 - leocreatini
是的，我没有看到滚动条，main.js被隐藏了。 - leocreatini
刚刚在返回类型上加了分号，但问题仍然存在。 - Erkan Demir
显示剩余5条评论
3个回答
13

问题已解决。答案是安装预设 npm i --save babel-preset-env babel-preset-react。然后在webpack.config.js中的加载程序中添加另一个键：query: {presets: ['env', 'react'] }。现在应该可以正常工作了。

0

我尝试了上述步骤，并阅读了许多博客和网站，但问题仍然存在。然后我发现我正在使用webpack 4。经过漫长的搜索，我找到了这篇博客：
https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75。
然后，我按照步骤操作后发现问题仍然存在。接着，我又经过漫长的搜索，发现我的node_modules文件夹中没有react文件夹。然后我执行以下步骤：

  1. 删除package.lock.json文件。
  2. 运行npm install命令。
  3. 检查node_modules文件夹，您现在将看到react文件夹。
  4. 运行npm start命令。
    5. 然后，我的问题得到了解决。
0
你可以尝试执行以下命令：npm rebuild node-sass。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接