web-dev-qa-db-ja.com

モジュールのビルドに失敗しました-Webpack、React、Babel

私は複数の視界からビデオチュートリアルに従っていました。コース名は「React、Flux、Webpack、Firebaseを使用したリアルタイムアプリの構築」です。

以下のコードと、私が抱えている問題の添付のスクリーンショットをご覧ください。ファイルを再構築しようとすると、Webpackが失敗します。誰かがその問題が何であるかをアドバイスしてくれませんか？現在、すべての最新ライブラリーを使用しています。

enter image description hereenter 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"
 }
 }
javascriptreactjswebpackbabeljsecmascript-7
10
Erkan Demir

解決しました。答えは、プリセットのインストールでしたnpm i --save babel-preset-env babel-preset-react。次に、ローダーのwebpack.config.jsに別のキーを追加します：query: {presets: ['env', 'react'] }。行くのが良いはずです。

13
leocreatini

上記の手順を試し、多くのブログやサイトをフォローしましたが、問題はまだそこにありました。その後、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を実行します。その後、私の問題は修正されました。
0
utkarsh bajpai