Реакция, как ожидается, будет доступна в мире

Я играю с React (@ 13.3) с babel и webpack.Реакция, как ожидается, будет доступна в мире

У меня есть компонент, который определен следующим образом:

import BaseComponent from './BaseComponent'; 

export default class SomeComponent extends BaseComponent { 
    render() { 
     return (
      <div> 
        <img src="http://placekitten.com/g/900/600"/> 
      </div> 
     ); 
    } 
}

Но я получаю следующее сообщение об ошибке:

Uncaught ReferenceError: React is not defined

Я понимаю ошибку: бит JSX компилируется в React.createElement(...) но React ISN» t в текущей области, так как он не импортируется.

Мои вопросы: Каков чистый способ обойти эту проблему? Должен ли я как-то разоблачить React глобально с помощью webpack?

Решение используется:

Я последовал @ salehen-Rahman предложение.

В моих webpack.config.js:

module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'react-hot!babel?plugins[]=react-require' 
    }, { 
     test: /\.css$/, 
     loader: 'style!css!autoprefixer?browsers=last 2 versions' 
    }] 
},

мне нужно исправить мои тесты, так что я добавил это в файле helper.js:

require('babel-core/register')({ 
    ignore: /node_modules/, 
    plugins: ['react-require'], 
    extensions: ['.js'] 
});

Мои тесты запускаются с помощью следующей команды:

mocha --require ./test/helper.js 'test/**/*.js'

источник

2015-09-13 kombucha

Вы пробовали 'импорт Реагировать из«реагировать» ; '? –

Импорт Импорт должен быть в BaseComponent. –

@ JanakaStevens это не имеет значения.Вышеприведенный код все равно не запускается, учитывая, что либо React не был импортирован вручную, либо нет трансформатора, который автоматически импортировал React. –

My questions is : What's the clean way to work around this issue ? Do I have to somehow expose React globally with webpack ?

Добавить babel-plugin-react-require в проект, а затем изменить Babel конфигурации вашего WebPack, чтобы иметь настройки сродни:

loaders: [ 
    { 
    test: /.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: { 
     stage: 0, 
     optional: ['runtime'], 
     plugins: [ 
     'react-require' // <-- THIS IS YOUR AMENDMENT 
     ] 
    }, 
    } 
]

Теперь, когда вы применили обновление конфигурации, вы можете инициализировать Реагировать компоненты без вручную импортируя React.

React.render(
    <div>Yippee! No <code>import React</code>!</div>, 
    document.body // <-- Only for demonstration! Do not use document.body! 
);

Имейте в виду, хотя, babel-plugin-react-require превращает ваш код автоматически включают Реагировать импорт только в присутствии JSX тега в конкретного файла, для конкретного файла. Для любого другого файла, который не использует JSX, но нуждается в Реагировании по любой причине, вам придется вручную импортировать React.

источник

2015-09-14 02:40:16

Работает для меня, я добавил еще несколько указателей на исходный пост. Благодаря ! – kombucha

Если реагировать в вашем узле каталога модулей вы можете добавить import React from 'react'; в верхней части файла.

источник

2015-09-13 19:37:49 walkerrandophsmith

Я мог бы это сделать, но странно иметь импорт, который на самом деле не используется. Ну, это не так, но не напрямую: /. – kombucha

Вы можете использовать Webpack's ProvidePlugin. Чтобы использовать, обновлять раздел плагинов в вашем WebPack конфигурации, чтобы включать в себя следующее:

plugins: [ 
    new webpack.ProvidePlugin({ 
    'React': 'react' 
    }) 
]

Это, однако, не решает его для испытаний ..

источник

2016-10-06 10:12:16

Реакция, как ожидается, будет доступна в мире

ответ

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