尝试在第一个React应用中添加Express时为什么会出现TypeError [英] Why do I get TypeError when I try adding express to my first react app
问题描述
我已经使用 npx create-react-app my-app 创建了我的第一个React应用并启动了它.现在，我想将express添加到此react应用中.因此，我在 index.js
I have created my first react app using npx create-react-app my-app and started it. Now I want to add express into this react app. Hence I have added the below line in my index.js
var express = require('express')
var express = require('express')
这就是我整个index.js的样子.上面是我添加的唯一一行，其余内容与我从 create-react-app
Here is what my whole index.js looks like. The above is the only line that I have added, rest is exactly same as what I got from create-react-app
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
var express = require('express')
// const helmet = require('helmet')
// const app = express()
// app.use(helmet())
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
我得到的错误是 TypeError:无法获取未定义或空引用的属性'prototype'.以下是我在浏览器中看到的错误的完整堆栈跟踪.并且请注意，没有编译问题.
The error that I'm getting is TypeError: Unable to get property 'prototype' of undefined or null reference. The below is the full stacktrace of the error that I'm seeing in browser. And please note that there are no compilation issues.
×
TypeError: Unable to get property 'prototype' of undefined or null reference
Anonymous function
mylocaldrivepath/react/my-app/node_modules/express/lib/response.js:58
55 | */
56 |
57 |
> 58 | var res = Object.create(http.ServerResponse.prototype);
59 | /**
60 | * Module exports.
61 | * @public
View compiled
./node_modules/express/lib/response.js
mylocaldrivepath/react/my-app/node_modules/express/lib/response.js:1
> 1 | /*!
2 | * express
3 | * Copyright(c) 2009-2013 TJ Holowaychuk
4 | * Copyright(c) 2014-2015 Douglas Christopher Wilson
View compiled
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/express/lib/express.js
mylocaldrivepath/react/my-app/node_modules/express/lib/express.js:27
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/express/index.js
mylocaldrivepath/react/my-app/node_modules/express/index.js:10
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./src/index.js
mylocaldrivepath/react/my-app/src/index.js:8
5 | import * as serviceWorker from './serviceWorker';
6 |
7 |
> 8 | var express = require('express')
9 | // const helmet = require('helmet')
10 |
11 | // const app = express()
View compiled
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:388:1
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
checkDeferredModules
mylocaldrivepath/react/my-app/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^
46 | }
47 | }
48 |
View compiled
webpackJsonpCallback
mylocaldrivepath/react/my-app/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^
33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
Global code
http://localhost:3000/static/js/main.chunk.js:1:2
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
对于解决此问题的任何帮助，我们将不胜感激！
Any help on fixing this issue is greatly appreciated !
推荐答案
我遇到了同样的问题并解决了！
I had the same problem and solved it!
我在后端使用Express.js和Node.js，在前端使用React.js，编译前端时，我会收到错误 TypeError:http.ServerResponse未定义
I was using Express.js and Node.js for backend and React.js for frontend and upon compiling the frontend I would get the error TypeError: http.ServerResponse is undefined
我使用 npx create-react-app 来创建反应前端，结果某些文件未正确编译.当我使用 create-react-app 创建反应前端时，一切都设置了！
I was using npx create-react-app for creating react frontend and as a result some of the files are not compiled properly. when I used create-react-app for creating react frontend it all got set!
因此，更好的做法是使用 create-react-app 而不是使用 npx create-react-app
So a better practice is to create your react app using create-react-app instead of using npx create-react-app
希望这会有所帮助！
这篇关于尝试在第一个React应用中添加Express时为什么会出现TypeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
