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

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,
  },
};