Question

我有一个与webpack有关的奇怪问题，但我不确定。这是上下文，我使用 ReactJS 创建一个前端，我有一个 Java 后端，所以我要做的是编译和捆绑所有的JS使用 webpack 和下面的配置。

const path = require("path");

module.exports = {
    entry: {
        main: path.join(__dirname, "src/js/index.js")
    },
    output: {
        path: path.join(__dirname, "src/main/resources/static/js"),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".js", ".jsx"],
        modules: [
            path.join(__dirname, "src"),
            "node_modules"
        ]
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                loader: "less-loader"
            },
            {
                test: /\.(js|jsx)$/,
                loader: "babel-loader"
            },
        ]
    }
};

这是唯一的JS文件，其基本显示失败：

import PropTypes from "prop-types";
import React from "react";
import ReactDOM from "react-dom";
import ReactRouter, {Link} from "react-router";

document.addEventListener("DOMContentLoaded", function () {
    console.log(React);
    console.log(PropTypes);
    console.log(ReactRouter);
    console.log(Link);
    console.log(document.getElementById("root"));

    ReactDOM.render(<Link to="/">Home</Link>, document.getElementById("root"));
});

我已经安装了所有npm必需的软件包，webpack运行没有错误，但是当我在浏览器中打开页面时，控制台中出现错误+警告。

警告：React.createElement：type无效 - 需要一个字符串   （对于内置组件）或类/函数（对于复合   组件）但得到：未定义。你可能忘了导出你的   来自其定义的文件中的组件。

错误：元素类型是   invalid：期望一个字符串（对于内置组件）或a   类/函数（对于复合组件）但得到：undefined。您   可能忘记从您定义的文件中导出组件。

我发现这是因为Link和ReactRouter是undefined，但我不明白它是如何被导入的，因为它们已经导入并且已经安装了包。

您对如何解决问题有任何想法吗？

Answer 1

除了您对帖子的第一条评论外，您可能还想查看您的React-Router版本。在最新版本中，{Link}是“react-router-dom”软件包的一部分，您可以将“react-router”的{Router}替换为“react-router-dom”的{BrowserRouter}。

React-Router-Dom是您安装的React-Router软件包的一部分（如果它是更新的版本），所以您需要做的就是将React-Router替换为{BrowserRouter}，将“react-router /”替换为“反应路由器-DOM”。

与webpack

1 个答案: