Question

我正在构建一个新的React应用但收到以下错误 - “要求未定义”

您好-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')
      );

App.jsx

import React from 'react';

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

export default App;

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

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

Answer 1

您正试图在浏览器中使用CommonJS模块。这将不工作。

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

此外，您还尝试加载RequireJS，它使用名为AMD，异步模块定义的不同模块定义模式，并且不会为您处理require调用。您可以在RequireJS特定的电话中wrap them。

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

但在您的具体情况下，如果您删除了import调用，只需让浏览器处理并将您创建的类附加到window对象，您的代码就可以运行。

Answer 2

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

因此，您可以使用 import React, {useState, useEffect} from 'react' 、React.useEffect() 代替 CommonJS React.useState() 来引用钩子。

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

要求没有定义

2 个答案: