当我尝试向第一个React应用程序添加Express时为什么会出现TypeError

我已经使用npx create-react-app my-app创建了我的第一个React应用，并启动了它。现在，我想将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