Почему я получаю TypeError, когда пытаюсь добавить экспресс в свое первое приложение реакции

Question

Я создал свое первое приложение реакции, используя npx create-react-app my-app, и запустил его. Теперь я хочу добавить экспресс в это приложение реакции. Поэтому я добавил строку ниже в мой 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.

Любая помощь по устранению этой проблемы очень ценится!

Answer 1

Обычно express размещается вне папки src для обслуживания вашего скомпилированного кода на стороне клиента;тем временем webpack-dev-server создает сервер разработки и компилирует код на лету;так что в этом случае, поскольку вы используете create-react-app и не используете рендеринг на стороне сервера, вам не нужен экспресс (для разработки).

Вместо этого, как только вы скомпилировали свой код для производства (через 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