Question

我正在通过Youtube编写React教程，并且已经匹配了他的webpack.config和package.json文件，但是在运行webpack-dev-server时出现了一个奇怪的错误

package.json

{
  "name": "react-tutorials",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-0": "^6.3.13",
    "bootstrap-without-jquery": "^1.0.5",
    "history": "^1.17.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^1.0.3",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^1.15.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot"
  },
  "author": "",
  "license": "ISC"
}

webpack.config

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

./ src / js / client.js

import React from "react";
import ReactDOM from "react-dom";

import Bootstrap from 'bootstrap-without-jquery';

import Layout from "./pages/Layout";

const app = document.getElementById('app');

ReactDOM.render(<div>/Hello</div>, app);

文件结构与教程的源代码匹配，所以我认为这不是问题。但是，当我运行npm run dev时，出现以下错误

Webpack Error

如果我注释掉client.js webpack的第10行，则不会有任何问题。（ReactDOM.render函数）

Answer 1

您已安装了Webpack 1，该服务器具有all the loader configurations in config.module.loaders，但是您的配置使用了Webpack 2中引入的config.module.rules。

安装Webpack 4应该可以解决您的问题。

npm install -D webpack@latest

Babel-Loader未解析ReactDom.render

1 个答案: