反應 - 模塊構建失敗

我正在嘗試使用Webpack進行基本的React設置，但是當前正在獲取這個控制檯錯誤，我試圖呈現html。反應 - 模塊構建失敗

不知道爲什麼，有什麼想法？

模塊構建失敗：語法錯誤：

的Javascript

import React from "react"; 
import { render } from "react-dom"; 

class App extends React.Component { 
    render() { 
     return (
      <p>h</p> 
     ) 
    } 
} 

render(<App/>, document.getElementById('main'));

的WebPack配置

const webpack = require('webpack'); 
const nodeEnv = process.env.NODE_ENV || "production"; 

module.exports = { 
    devtool: "source-map", 
    entry: { 
     filename: "./index.js" 
    }, 
    output: { 
     filename: "build/bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015-native-modules'] 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false }, 
      output: { comments: false }, 
      sourcemap: true 
     }), 
     new webpack.DefinePlugin({ 
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv 
      )} 
     }) 
    ] 
}

的package.json

{ 
    "name": "joe-react", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack --progress --watch" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.24.0", 
    "babel-loader": "^6.4.1", 
    "babel-preset-es2015-native-modules": "^6.9.4", 
    "webpack": "^2.3.2" 
    } 
}

來源

2017-04-02 Joe Consterdine

您需要巴貝爾反應預置，我看到你現在使用了奇怪的預設，用es2015代替

來源

2017-04-02 12:26:41 AlexeyKuznetsov

感謝你。對於任何想知道我卸載了'babel-preset-es2015-native-modules'並安裝了'babel-preset-es2015'的人，我的webpack.config.js改爲'es2015'而不是'es2015-native-modules'。我還安裝了'babel-preset-react'，並在webpack.config.js中的預設中添加了該選項。 –

反應 - 模塊構建失敗

回答

相關問題