时间戳

首页 > 解决方案 > Babel-Loader 不解析 ReactDom.render

reactjs - Babel-Loader 不解析 ReactDom.render

问题描述

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

包.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 错误

如果我注释掉client.jswebpack 的第 10 行，编译没有问题。（ReactDOM.render 函数）

标签： reactjswebpackwebpack-dev-serverbabeljsbabel-loader

解决方案

您已经安装了 Webpack 1，其中包含所有加载程序配置config.module.loaders，但您的配置使用config.module.rules的是 Webpack 2 中引入的。

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

npm install -D webpack@latest

推荐阅读