Error using Postgres with a newly created React app: Module not found: Can't resolve 'dns'

Question

I am probably missing something very obvious here, but I keep getting the following error when trying to use Postgres from a newly created React app

Module not found: Can't resolve 'dns' in '/Users/tarek/test/node_modules/pg/lib'

Here are the steps to reproduce:

Create a fresh React app using create-react-app
Add the Postgres module using npm install pg --save
Add the following line to App.js: const { Client } = require('pg');
Type npm run start and you'll get the above error.

What am I missing here?

**Node version: v8.12.0

** package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "pg": "^7.4.3",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Henry · Accepted Answer · 2018-09-18 07:27:45Z

3

The issue is that React apps are meant to run in the browser, and browsers can't access databases directly. Even if you did find a way to do this, it would only work locally and not in production. Consider that if the database is on your machine and your app available on the internet, there would be no way for a remote user to get access to the data on your machine in the way you are describing.

In order to use a database with React, you'll need to set up a server—possibly written in Node (with Express)—that will serve your application and data for it.

The server receives requests from different users and responds with the appropriate resources. For example if they go to your website (e.g. example.com), your server should respond with index.html for your project (in this case it would be the index.html for your React app). Then to get data from your database, you can set up an api with routes like example.com/api/model/1 so that your react app can request the instance of model with id 1 from your server, which will grab it from the database and send it over to the React app.

Look into the MERN (Mongo Express React Node) stack for more detail on how all these work together. Even with Postgres the process will be pretty much the same as with Mongo.

answered Sep 18, 2018 at 7:27

Henry

15.9k7 gold badges51 silver badges69 bronze badges

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

1 Comment

Tarek Over a year ago

Thanks Henry, that was really helpful.

Collectives™ on Stack Overflow

Error using Postgres with a newly created React app: Module not found: Can't resolve 'dns'

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related