Webpack + React16 + Javascript ES6「予期しないトークン」エラー

Question

この質問は約1000回尋ねられましたが、私はうまくいきませんでした。私はまだ同じエラーが発生しています。ここに私の設定ファイルは以下のとおりです。

package.json：

{ 
    "scripts": { 
     "start": "webpack-dev-server", 
     "build": "webpack" 
    }, 
    "dependencies": { 
     "jquery": "^3.2.1", 
     "react": "^16.1.1", 
     "react-dom": "^16.1.1" 
    }, 
    "devDependencies": { 
     "babel": "^6.23.0", 
     "babel-cli": "^6.26.0", 
     "babel-core": "^6.26.0", 
     "babel-loader": "^7.1.2", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "babel-preset-stage-0": "^6.24.1", 
     "clean-webpack-plugin": "^0.1.17", 
     "css-loader": "^0.28.7", 
     "html-webpack-plugin": "^2.30.1", 
     "style-loader": "^0.19.0", 
     "webpack": "^3.8.1", 
     "webpack-dev-server": "^2.9.4" 
    } 
} 

webpack.config.js：

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    entry: './src/app/app.jsx', 
    devtool: 'source-map', 
    devServer: { 
     contentBase: path.join(__dirname, "dist"), 
     hot: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       use: [ 
        'style-loader', 
        'css-loader' 
       ] 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: "babel-loader", 
       query: 
        { 
         presets: ['es2015', 'react'] 
        } 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './src/app/index.html' 
     }), 
     new webpack.NamedModulesPlugin(), 
     new webpack.HotModuleReplacementPlugin() 
    ], 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'app.bundle.js' 
    } 
}; 

app.jsx：

import React from "react" 

React.render(<h1>hello world</h1>, document.getElementById("root-component")); 

のWebPACKには、次のエラーがスローされます：

ERROR in ./src/app/app.jsx 
Module parse failed: Unexpected token (3:13) 
You may need an appropriate loader to handle this file type. 
| import React from "react" 
| 
| React.render(<h1>hello world</h1>, document.getElementById("root-component")); 

プリセット付き.babelrcファイルの追加など、複数のソリューションを試しましたが、何も機能しません。どんな助け？

Answer 1

あなたのwebpack.config.jsはwebpack v3によると間違っています。

CSSをロードするのと同じように、rules配列に別のエントリを追加する必要があります。
さらにqueryの名前をoptionsに変更する必要があります。

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    entry: './src/app/app.jsx', 
    devtool: 'source-map', 
    devServer: { 
     contentBase: path.join(__dirname, "dist"), 
     hot: true 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       use: [ 
        { 
         loader: "babel-loader", 
         options: { 
          presets: ['es2015', 'react'] 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.css$/, 
       use: [ 
        'style-loader', 
        'css-loader' 
       ], 
      } 
     ], 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './src/app/index.html' 
     }), 
     new webpack.NamedModulesPlugin(), 
     new webpack.HotModuleReplacementPlugin() 
    ], 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'app.bundle.js' 
    } 
}; 

前：

ERROR in ./src/app/app.jsx Module parse failed: Unexpected token (3:13)

ATER（正しく作成バンドル）：

は、次のように

固定webpack.config.jsがV2からV3に移行に関する詳細はWebpack Documentationを参照してください

app.bundle.js 424 kB 0 [emitted] [big] main app.bundle.js.map 499 kB 0 [emitted] main