Question

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

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

错误：不变违规：元素类型无效。期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。

一切都是出口的，这不是问题。在实现ReactRouter 4之前，该页面运行良好。当我在Chrome中进行一些调试时，我看到了那种类型（在这种情况下输入的是＆＃34;路由器＆＃34;未定义。）

我的索引如下：

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文件中。

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

另外，我的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和externals中尝试使用和不使用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,
  },
};

使用React，ReactDOM和ReactRouter

1 个答案: