使用导入时未定义要求答案

【问题标题】：Require is not defined when using import使用导入时未定义要求
【发布时间】：2023-02-23 02:24:31
【问题描述】：

我正在尝试将一个 JS 文件导入另一个 JS 文件。但是，每当我尝试使用 import 命令时，它都会抛出“Require not defined”问题。可能是什么问题呢？

index.html 文件：

<html>
    <head>
        <link rel="stylesheet" href="style.css">

        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        <script src="main.js" type="text/babel"></script>
    </body>
</html>

Header.js 文件：

export default function Header() {
    return (
        <header>
            <nav id="headerNav">
                <ul id="navList">
                    <li><button onClick={changePage(1)}>Mines</button></li>
                    <li><button onClick={changePage(2)}>Forest</button></li>
                    <li><button onClick={changePage(3)}>Smith</button></li>
                    <li><button onClick={changePage(4)}>Build</button></li>
                </ul>
            </nav>
        </header>
    )
}

main.js 文件：

import Header from "./components/Header"

function Page() {
    return (
        <div>
            <Header />
        </div>
    )
}

// React Render
const rootDiv = document.getElementById("root");
ReactDOM.render(<Page />, rootDiv)

我尝试使用：

tsconfig.json 和 jsconfig.json: 我看到有些编译器可能会将 import 命令转换为 require，所以我创建了这个并将 allowSyntheticDefaultImports 添加为 true。没有改变。
webpack配置：我还从 Visual Studio Code 下载了 webpacks 扩展，看看它是否也有帮助。没有改变。
在 HTML 中作为 type="module" 导入: 我试过在 HTML 中使用标签，但它也没有用。

【问题讨论】：

标签： javascript html reactjs import export

【解决方案1】：

“ReferenceError: require is not defined”错误发生在 require 函数在 JavaScript 文件中使用，该文件旨在在 Web 浏览器中执行，而不是在 Node.js 环境中执行。

因此，在这种情况下，如果您尝试使用 require 则会抛出错误文件中的函数，旨在在 Web 浏览器中执行。

简要总结 require 函数是一个全局函数，它是由 Node.js 运行时环境提供。它用于加载和在 Node.js 应用程序中执行模块。然而，要求功能在网络浏览器中不可用，因为网络浏览器不支持 Node.js 模块系统。

阅读更多：需要与导入

要修复此错误，您需要删除对需要您的代码中的功能。

// This code will throw a "ReferenceError: require is not defined" error const myModule = require('./my-module');

// To fix the error, remove the require function and use a different approach to load the module import myModule from './my-module';

https://stackdiary.com/guides/referenceerror-require-is-not-defined/

所以你需要使用import，而不是require，因为你使用的是 React。

【讨论】：