Требование не определено

Создав новое приложение React, вы получите следующую ошибку: "require 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>

HELLO-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;

Im работает с моим клиентом и не работает какой-либо веб-сервер.

Я попытался включить http://requirejs.org/docs/release/2.2.0/minified/require.js но это дает совершенно другую ошибку.

Ответы

Ответ 1

Вы пытаетесь использовать модуль CommonJS из своего браузера. Это будет не работать.

Как вы их используете? Когда вы пишете import ... from ... в ES6, Babel переведет эти вызовы в определение модуля CommonJS и, поскольку CommonJS не находится в браузере, вы получите ошибку undefined из require().

Кроме того, вы также пытаетесь загрузить RequireJS, который использует другой шаблон определения модуля под названием AMD, определение асинхронного модуля и не будет заботиться о вызовах require для вас. Вы можете обернуть их в особых вызовах RequireJS.

Если вы хотите использовать модули CommonJS в базе кода, вам необходимо сначала связать их с Browserify или webpack. Эти два инструмента превратят ваши вызовы require в некоторую магию клей, которую вы можете использовать в браузере.

Но в вашем конкретном случае, если вы удалите вызовы import и просто обойдете браузер и приложите классы, которые вы создали к объекту window, ваш код должен работать.