web-dev-qa-db-fra.com

require n'est pas défini

Je construis une nouvelle React app mais obtenez l'erreur suivante - "require n'est pas défini"

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

Je lance ceci à partir de mon client et je n'ai aucun serveur Web en cours d'exécution.

J'ai essayé d'inclure http://requirejs.org/docs/release/2.2.0/minified/require.js mais cela donne une erreur totalement différente.

reactjsrequirejs
23
user1050619

Vous essayez d'utiliser un module CommonJS à partir de votre navigateur. Cela fonctionnera pas.

Comment les utilisez-vous? Lorsque vous écrivez import ... from ... Dans ES6, Babel transcrira ces appels en une définition de module appelée CommonJS. Comme CommonJS n'est pas présent dans le navigateur, vous obtiendrez une erreur non définie de require().

En outre, vous essayez également de charger RequireJS, qui utilise un modèle de définition de module différent appelé AMD, Définition de module asynchrone, et ne prend pas en charge les appels require. Vous pouvez les envelopper dans les appels spécifiques à RequireJS.

Si vous souhaitez utiliser des modules CommonJS dans votre base de code, vous devez d'abord les regrouper avec Browserify ou webpack . Les deux outils transformeront vos appels require en une magie de la colle que vous pourrez utiliser dans le navigateur.

Mais dans votre cas particulier, si vous supprimez les appels import et laissez le navigateur s'en charger, vous attachez les classes que vous avez créées à l'objet window que votre code devrait utiliser.

54
Henrik Andersson