CODEWITHSUNDEEP
javascriptwebpack
user254694
user254694

Reputation: 1612

why is webpack saying react is not defined here?

I have some code like this 

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'));

which works with webpack building it. I need to do similar stuff at a couple other places so I thought I would make a generic solution, taking most of that code out and putting it inside an SPA builder - like the following 

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;

and then importing it into app.js like so 

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

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

When I run this I get the error message

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

which if I look into what webpack built it has the following:

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

so I can see that there is no React defined in there - how do I get it to be defined?

Upvotes: 1

Views: 292

Answers (2)

Slawomir Chodnicki
Slawomir Chodnicki

Reputation: 1545

Whenever you use jsx, in your case you use <Approuter /> in app.js, it gets transpiled to React.createSomethingOrOther. Therefore you have to import React explicitly into any module that uses jsx. Just import React from "react"; in your app.js.

Upvotes: 1

HARU
HARU

Reputation: 31

Did you import React to 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');

Upvotes: 0

Related Questions