React - Uncaught ReferenceError: require не определен

Я делаю простую фляжку, используя реакцию на внешний интерфейс. Сейчас я экспериментирую с импортом компонентов React из других файлов без успеха. Это ошибка, я получаю:React - Uncaught ReferenceError: require не определен

Uncaught ReferenceError: require is not defined

Это мой HTML-файл:

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Index page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css"> 
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"> 
</head> 
<body> 
    <div class="columns"> 
     <div class="column"> 
      some stuff 
     </div> 
     <div class="column"> 
      <div id="index"></div> 
     </div> 
    </div> 
    <script type="text/babel" src="static/js/index.js"></script> 
</body> 
</html>

и мой index.js:

import FormComponent from './FormComponent.js'; 

var MainClass = React.createClass({ 
    render:function(){ 
    return (
     <div> 
     <div>this is the main component</div> 
     <div><FormComponent /></div> 
     </div> 
    ); 
    } 
}); 


ReactDOM.render(<MainClass />, document.getElementById('index'));

и, наконец, FormCommponent.js, который находится в одной папке:

var FormComponent = React.createClass({ 

    render: function() { 
    return (
     <div>this is an imported component</div> 
    ); 
    } 

}); 

module.exports = FormComponent;

Кто-нибудь знает, что я делаю неправильно?

Я не использую менеджеров пакетов.

РЕДАКТИРОВАТЬ
решили эту проблему, используя browserify, как указано ниже. Спасибо за помощь

источник

2016-03-28 André Macedo

'require' * only * работает на интерфейсном клиентском коде, если вы используете Browserify или какое-то другое решение. Браузеры не имеют собственного определения 'require'. –

Вам нужно использовать что-то вроде Rollup, Webpack или Browserify. Это заявление import FormComponent from './FormComponent.js'; ничего не значит на клиенте. Ни один браузер не поддерживает его, поэтому вам нужно что-то вроде упомянутых выше инструментов, чтобы превратить его в то, что браузер действительно может использовать.

Без них вам просто нужно загрузить файлы в свой index.html.

источник

2016-03-28 04:09:18 ThrowsException

Справочник [browerify handbook] (https://github.com/browserify/browserify-handbook) начинается с хорошего объяснения того, почему это необходимо тем, кто не понимает, что это такое. –

React - Uncaught ReferenceError: require не определен

ответ

Смежные вопросы