node.js - 当我尝试将 express 添加到我的第一个 react 应用程序时,为什么会出现 TypeError
问题描述
我已经使用npx create-react-app my-app
并启动了我的第一个反应应用程序。现在我想将 express 添加到这个 react 应用程序中。因此,我在我的index.js
var express = require('express')
这是我的整个 index.js 的样子。以上是我添加的唯一一行,其余的与我得到的完全相同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: Unable to get property 'prototype' of undefined or null reference
. 下面是我在浏览器中看到的错误的完整堆栈跟踪。请注意,没有编译问题。
×
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.
非常感谢任何有关解决此问题的帮助!
解决方案
通常express
放置在 src 文件夹之外,为您编译的客户端代码提供服务;同时,webpack-dev-server
创建一个开发服务器并即时编译代码;所以在这种情况下,由于您使用create-react-app
而不是使用服务器端渲染,因此您不需要 express(用于开发)。
相反,一旦您编译了生产代码(通过npm run build
),您将需要某种方式来提供资产。通常,您将拥有一个app.js
位于文件夹之外的src
文件,该文件将为您编译的生产文件夹(dist
或build
)提供服务:
const { resolve } = require("path");
const express = require("express");
const app = express();
const currentDirectory = process.cwd(); // current directory
app.use(express.static("dist")); // express will serve up production assets
app.get("*", (req, res) =>
res.sendFile(resolve(`${currentDirectory}/dist/index.html`))
); // express will serve up the front-end index.html file if it doesn't recognize the route
app.listen(8080, err => {
if (!err) {
console.log(`\nYour application is running on port 8080}\n`);
} else {
console.err(`\nUnable to start server: ${err}`);
}
});
例如:
├── dist
| ├── css
| | ├── main.[contenthash:8].css
| | └── main.[contenthash:8].css.map
| ├── js
| | ├── main.[hash].js
| | └── main.[hash].js.map
| ├── media
| | └── [hash].[ext]
| └── favicon.ico
| └── index.html
|
├── public
| ├── favicon.ico
| └── index.html
|
├── src
| ├── actions
| ├── components
| ├── containers
| ├── images
| ├── pages
| ├── reducers
| ├── root
| ├── routes
| ├── styles
| ├── types
| ├── utils
| └── index.js
|
└── app.js
推荐阅读
- swift - Swift - 无法将多个项目添加到 Firebase 数据库的条目中
- android - 应用程序启动前 Android 上的“黑屏”
- tfs - 在 vNext Build 中仅获取部分 Shelveset
- github - 使用 Brew 连接到 Github 时遇到问题
- python - 为什么访问数据框和列表中的值不同?
- javascript - 浏览器不会用包含文件替换包含文件
- awk - AWK:当第 1 列和第 2 列匹配时删除所有行
- powershell - 即使捕获到异常,Pester 也无法通过测试
- java - Golang 和 apache AB
- c - 如何将 Lchild 和 Rchild 添加到现有节点?