反应 - 模块构建失败答案

【问题标题】：React - Module Build Failed反应 - 模块构建失败
【发布时间】：2017-04-02 11:32:25
【问题描述】：

我正在尝试使用 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
            )}
        })
    ]
}

包.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"
  }
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你需要 babel react 预设，我看到你现在用奇怪的预设，改用 es2015

【讨论】：

谢谢。对于任何想知道我卸载'babel-preset-es2015-native-modules'并安装'babel-preset-es2015'并将我的webpack.config.js更改为'es2015'而不是'es2015-native-modules'的人。我还安装了“babel-preset-react”并将其添加到 webpack.config.js 的预设中。