Question

我正在尝试在create-react-app预配置项目中修改入口点文件index.js。我试图将项目连接到mongodb，在index.js中添加一个body-parser和api文件，但是在编辑index.js时出现错误。

Index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(App, document.getElementById('root'));

我的代码：

const express = require('express');
const app = express()
const bodyParser = require('body-parser')
const mongoose = require('mongoose')

mongoose.connect('mongodb://localhost/treedb')
mongoose.Promise = global.Promise
app.use(bodyParser.json())

//initialize routes
app.use('/api', require('./routes/api'))

错误：

TypeError: Cannot read property 'prototype' of undefined
in file node_modules/express/lib/response.js:58:

var res = Object.create(http.ServerResponse.prototype);

当我使用“ npm start”启动应用程序并运行“ react-scripts start”时，会发生此错误。当我运行“ node index.js”时，我的代码很好，但是导入语句导致错误。有什么想法如何编辑index.js文件而不会引起错误吗？谢谢。

Answer 1

正如@skyboyer所提到的，您似乎出于非预期目的使用Create React App。 Create-React-App是一个工具包，可让您快速开始开发基于React的 web应用程序，而不必担心设置和维护Webpack配置等麻烦。您似乎正在尝试设置连接到MongoDB的API服务器。

如果您只想创建一个快速应用程序用作您的API服务器，而无需任何基于React的前端，则不应使用CRA对其进行设置。

大多数情况下，您需要同时拥有：客户端Web应用程序（基于React）和服务器端API应用程序（基于Express），在这种情况下，您有两个选择：

相同的项目，但是有两个源目录。您可以创建与src相同级别的文件夹，但使用不同的名称：dataSrc表示e.x。然后您可以修改package.json以启动两个服务器。除了出于学习目的之外，我不建议您这样做，因为这将使您难以维护，并且当您需要捆绑并交付给产品时，这将变得棘手。
为您的API服务器创建一个新项目，该项目与Web应用程序分开。

在两种情况下，为了进行开发，您都需要将Create React App配置为proxy the data requests到您的API服务器。

希望这可以使您更加清楚。随时要求您澄清是否仍然使您感到困惑。

Answer 2

我认为问题与您尝试通过执行node index.js在服务器上运行客户端应用程序有关。

也可能是服务器和客户端文件都名为index.js，因此建议不要将它们保存在单独的文件夹中。

作为最后一分钟的检查，运行npm install以确保正确安装了必需的依赖项，然后运行node index.js。

如何在create-react-app中修改index.js文件

2 个答案: