2

I am trying to modify the entry point file index.js in the create-react-app pre-configured project. I am trying to connect the project to mongodb, add a body-parser and api file in index.js but I get an error when I edit 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'));

My code:

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'))

Error:

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

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

This error occurs when I start the app with "npm start" and "react-scripts start" is run. My code is fine when I run "node index.js" but the import statements cause an error instead. Any ideas how to edit the index.js file without causing an error? Thanks.

Improve this question
2
  • 2
    do you get this error while running in browser? it seems like you are trying to add backend-related stuff into file that is running on the client. just like that. Commented Nov 6, 2018 at 7:18
  • Yes, that was the problem. Thank you Commented Nov 7, 2018 at 8:08

2 Answers 2

Reset to default
2

As mentioned by @skyboyer you seem to be using Create React App for purposes it was not meant for. Create-React-App is a toolkit which enables you to quickly start developing react based web application without having to worry with the hassle of setting up & maintaining webpack configs and other such things. You seem to be trying to setup an API server which connects to your MongoDB.

If you just want to create an express app to serve as your API server, without any react based front end, you shouldn't use CRA to set it up.

Most probably, you need to have both: a client side webapp (React based) and a Server side API app (express based), in this case, you have two options:

  1. Same project, but two source directories. You can create a folder on the same level as the src but with a different name: dataSrc for e.x. and then you can modify your package.json to start both servers. I would not recommend this, except for learning purposes, as this will become tricky for you to maintain and when you need to bundle and deliver to prod, this will become tricky.
  2. Create a new project for your API server, which is separate from your web app.

In both cases, for development, you will need to configure the Create React App to proxy the data requests to your API server.

Hope this gives you some clarity. Feel free to ask for clarification if something still confuses you.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you so much! That was very helpful. I understand now.
I have a question. How is a project determined to be a client side or server side app? Does the code in index.js determine that?
If I can oversimplify it, it depends on what executes the code in index.js, for e.x. if you execute the index.js on a nodejs process , it is a server side app, if the index.js has to be downloaded by a browser in order to be executed, it is a client side app. You can also think of it as, is the execution (start, stop etc.) in your control or not. normally you or your operations team or service provider can start, stop etc, a server side app, but you cannot stop people from executing the index.js file the users have downloaded on their browser. I will link a simple tutorial when I find it
seguetech.com/client-server-side-code is slightly outdated, but still a decent explanation. You may be confused by server side rendering (SSR) or the term serverless, try not to look into them until you are comfortable with understanding the stack.
I see, I think I understand. Thank you for your help!
0

I think the issue has to do with your trying to run a client side application on the server by doing this node index.js.

It could also be that you have both your server and client files named index.js which is not advisable except they are tucked away in separate folders.

As a last minute check, run npm install to ensure the required dependencies are installed correctly, then run node index.js.

Improve this answer

1 Comment

Yes I was trying to use the client side application like a backend app. Thanks for your help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.