почему webpack говорит, что реакция здесь не определена?

Question

У меня есть такой код

import React, { Component } from 'react';
import AppRouter from './app/route';
import ReactDOM from 'react-dom';


// Disable react dev tools in production
if (process.env.NODE_ENV === 'production'
    && window.__REACT_DEVTOOLS_GLOBAL_HOOK__
    && Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length
) window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers = {};

// Enable React hot reload in development
if (process.env.NODE_ENV === 'development') {
    module.hot.accept('./app.js', () => {
        ReactDOM.render(<AppRouter />, document.getElementById('complianceApp'));
    });
}

ReactDOM.render(<AppRouter />, document.getElementById('complianceApp'));

, который работает с веб-пакетом, собирающим его.Мне нужно сделать аналогичные вещи в паре других мест, поэтому я подумал, что смогу сделать общее решение, вытащив большую часть этого кода и поместив его в построитель SPA - как в следующем

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const spa_boilerplate = (component, path, elID) => {
    if (process.env.NODE_ENV === 'production'
    && window.__REACT_DEVTOOLS_GLOBAL_HOOK__
    && Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length
    ) { window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers = {};}

    // Enable React hot reload in development
    if (process.env.NODE_ENV === 'development') {
        module.hot.accept(path, () => {
            ReactDOM.render(component, document.getElementById(elID));
        });
    }

    ReactDOM.render(component, document.getElementById(elId));
}

export default spa_boilerplate;

, а затем импортируяэто в app.js вот так

import AppRouter from './app/route';
import spa_boilerplate from './shared/spa_boilerplate';

spa_boilerplate(<AppRouter />,  '../../app.js', 'complianceApp');

Когда я запускаю это, я получаю сообщение об ошибке

ReferenceError: React is not defined

app.js line 4147 > eval:16:1
    <anonymous> webpack:///./src/app.js?:16
    js http://localhost:8001/app.js:4147
    __webpack_require__ http://localhost:8001/app.js:724
    fn http://localhost:8001/app.js:101
    <anonymous> webpack:///multi_(webpack)-dev-server/client?:3
    0 http://localhost:8001/app.js:4515
    __webpack_require__ http://localhost:8001/app.js:724
    <anonymous> http://localhost:8001/app.js:791
    <anonymous> http://localhost:8001/app.js:794

, которое, если я смотрю в какой пакет построен, имеет следующее:

Object(_shared_spa_boilerplate__WEBPACK_IMPORTED_MODULE_1__["default"])(React.createElement(_app_route__WEBPACK_IMPORTED_MODULE_0__["default"], null), '../../app.js', 'complianceApp');

так что я вижу, что там не определен React - как мне его определить?

Answer 1

Всякий раз, когда вы используете jsx, в вашем случае вы используете <Approuter /> в app.js, он переносится в React.createSomethingOrOther.Поэтому вы должны явно импортировать React в любой модуль, который использует jsx.Просто import React from "react"; в вашем app.js.

Answer 2

Импортировали ли вы React в app.js?

import AppRouter from './app/route';
import spa_boilerplate from './shared/spa_boilerplate';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

spa_boilerplate(<AppRouter />,  '../../app.js', 'complianceApp');