要求未定义

IT技术 reactjs requirejs
2021-04-14 09:00:47

我正在构建一个新的 React 应用程序，但收到以下错误 - “require is not defined”

你好-world.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" src="hello-world.js">
  </body>
</html>

你好-world.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(
        <App />,
        document.getElementById('example')
      );

应用程序.jsx 

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

我从我的客户端运行它并且没有运行任何网络服务器。

我试图包括http://requirejs.org/docs/release/2.2.0/minified/require.js 但它给出了一个完全不同的错误。

2个回答

您正在尝试从浏览器中使用 CommonJS module。这将不会工作。

你如何使用它们？当您import ... from ...在 ES6 中编写时，Babel 会将这些调用转换为名为 CommonJS 的module定义，并且由于 CommonJS 不在浏览器中，您将从require().

此外，您还尝试加载 RequireJS，它使用称为 AMD、异步module定义的不同module定义模式，并且不会require为您处理调用。您可以将它们包装在 RequireJS 特定的调用中。

如果你想在你的代码库中使用 CommonJS module，你需要首先将它们与Browserify或webpack捆绑在一起。这两个工具会将您的require调用转换为一些可以在浏览器中使用的胶水魔法。

但是在您的特定情况下，如果您删除import调用并让浏览器处理并将您创建的类附加到window您的代码应该工作的对象。

另外，请注意，当您在不使用其他转译器的情况下使用来自 React 的子module时，您将必须引用顶级module。我只知道在某些情况下，有些人不希望重构他们的项目并更改目录来处理 webpack/browserify module导入。

因此，而不是使用CommonJS的import React, {useState, useEffect} from 'react'，你可以参考，而不是用钩子React.useEffect()，React.useState()。

对于那些不想处理任何重构的人来说，这只是另一种解决方案。

其它你可能感兴趣的问题
上一篇react依赖注入或类似的？ 下一篇react-hooks：从 useEffect 分派动作