javascript - 使用 React、React DOM 和 React Router 的外部时，React Router 4 出现问题

Question

我目前正在应用程序中实现 React Router v.4，我还使用 Webpack 进行捆绑。 在我的 webpack 配置中，我已将 React、ReactDOM 和 React-router-dom 设置为外部依赖项。我使用脚本标签将它们导入到我的 index.html 中。 我无法让这种方法发挥作用。 当我在 webpack 的外部部分设置以下内容时，我从 React 收到以下错误:

externals: {
"react-router": "ReactRouter",
"react-router-dom: "ReactRouterDOM",
"react": "React",
"react-dom": "ReactDOM"}

错误: 不变违规:元素类型无效。需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:未定义。您可能忘记从定义它的文件中导出组件。

一切都已导出，这不是问题。在我实现 ReactRouter 4 之前，该页面运行得非常完美。 当我在 Chrome 中进行一些调试时，我看到了该类型(在本例中，类型是未定义的“路由器”。)

我的索引如下所示:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./main/App";
import {BrowserRouter} from "react-router-dom";

ReactDOM.render((<BrowserRouter><App /></BrowserRouter>), document.getElementById("root"));

如果我在外部评论 ReactRouter 部分，它就可以工作，但我希望路由器作为外部全局而不是捆绑在我的bundle.js 文件中。

我不确定如何使用外部部分以及在字段中实际写入什么内容。也许我的名字有误或者什么的？我尝试了几种不同的组合。每次都失败。

另外，我的index.html 看起来像这样:

<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<script src="./node_modules/react-router/umd/react-router.js"></script>
<script src="./node_modules/react-router-dom/umd/react-router-dom.js"></script>

我不确定是否需要react-router，所以我在index.html和外部中尝试了使用和不使用react-router，没有改变，照常失败。

希望你能帮我解决这个问题，我在 webpack 3 中没有找到任何关于外部的好的文档来帮助我理解为什么会出现这个错误。

Answer 1

如果您在浏览器中使用路由器，我认为您只需要这三个条目:

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'react-router-dom': 'ReactRouterDOM'
}

顺便说一句，您可能还想看看这个 Webpack plugin自动化您正在尝试做的事情。这是我最近在 Webpack 4 中用于开发的配置，您可能会发现其中的一些部分很有帮助:

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
const WebpackBar = require('webpackbar');

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  hash: true,
});

const externals = [
  {
    "module": "react",
    "entry": "//unpkg.com/react@16/umd/react.production.min.js",
    "global": "React"
  },
  {
    "module": "react-dom",
    "entry": "//unpkg.com/react-dom@16/umd/react-dom.production.min.js",
    "global": "ReactDOM"
  },
  {
    "module": "react-router-dom",
    "entry": "//cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.min.js",
    "global": "ReactRouterDOM"
  }
];

module.exports = {
  // devtool: 'eval-source-map',
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "src"),
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            retainLines: true,
          }
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
    ]
  },
  plugins: [
    new WebpackBar(),
    htmlPlugin,
    new HtmlWebpackExternalsPlugin({
      externals: externals,
    }),
  ],
  stats: {
    modules: false,
    colors: true,
  },
};