javascript - Trying to run my node.js server at same time as React .js App and get: 'ERR_MODULE_NOT_FOUND'

Question

I've set up a server for an ecommerce site I am building in React and trying to run both the React app and the server at the same time but keep getting errors - and after solving them getting more. None of the fixes I have found online work.

I use npm run dev so to run the application in development server and run the node server at the same time (package.json is included and shows how I set it up) - however I get these warnings and errors:

I do not know why it cant finde the module it is talking about because the files are there and imported etc.. the relevant code is posted below.

package.json:

{
  "name": "ecommerce",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "node-env-run server --exec nodemon | pino-colada",
    "dev": "run-p server start"
  },
  "type": "module",
  "keywords":[
    "ES",
    "MODULES",
    "NODE",
    "MODULES",
    "JS"
  ],
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/node": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "express-pino-logger": "^5.0.0",
    "node-env-run": "^4.0.2",
    "nodemon": "^2.0.7",
    "npm-run-all": "^4.1.5",
    "pino-colada": "^2.1.0"
  },
  "proxy": "http://localhost:3001"

}

server/index.js:

import data from './data';

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);

app.get('/api/prodcuts', (req, res) => {
  
  res.setHeader('Content-Type', 'application/json');
  res.send(data.products);
});

app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
);

server/data.js:

const data = {
    products: [
    {
        _id: '1',
        name: 'Charizard',
        category: 'Pokemon Cards',
        image: '/Images/d1.jpg',
        price: 60,
        rating: 4.5,
        numReview: 10
    },
    {
        _id: '2',
        name: 'Squirtle',
        category: 'Pokemon Cards',
        image: '/Images/d2.jpg',
        price: 30,
        rating: 4.1,
        numReview: 10
    },
    {
        id: '3',
        name: 'Mew',
        category: 'Pokemon Cards',
        image: '/Images/d3.jpg',
        price: 500,
        rating: 4.8,
        numReview: 10
    }

]
}

export default data;

If there is anything else I need to add please let me know!

question from:https://stackoverflow.com/questions/65943291/trying-to-run-my-node-js-server-at-same-time-as-react-js-app-and-get-err-modu

Answer 1

I had the same problem It just required me to add file extension when importing

import data from './data.js'