[英]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. 使用webpack构建它。 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 我需要在其他几个地方做类似的事情,所以我想我将制定一个通用的解决方案,将大部分代码取出并放入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;
and then importing it into app.js like so 然后像这样将其导入到app.js中
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: 如果我查看构建了什么webpack,它具有以下内容:
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? 所以我可以看到那里没有定义React-如何定义它?
Did you import React to app.js? 您是否将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');
Whenever you use jsx, in your case you use <Approuter />
in app.js, it gets transpiled to React.createSomethingOrOther
. 每当您使用jsx时,就在app.js中使用<Approuter />
,它将被转换为React.createSomethingOrOther
。 Therefore you have to import React explicitly into any module that uses jsx. 因此,您必须将React显式导入任何使用jsx的模块中。 Just import React from "react";
只需import React from "react";
in your app.js. 在您的app.js中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.