反应 - 模块构建失败

我正在尝试使用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中的预设中添加了该选项。 –

反应 - 模块构建失败

回答

相关问题