0

I've got a web development project based on e-commerce but when I try to run my project on the local server I always getting this type of error. Don't find any solution yet.

Here is the screenshot of the error

For better understanding, I added my server.js and package.json file in the post

Here it is sever.js 

import express from 'express';
import data from './data';

const app = express();

app.get("/api/products", (req, res) => {

res.send(data.products);
});

app.listen (5000, () => {console.log("Server started at http://localhost:5000")})

In package.json

{
  "name": "web-development",
  "version": "1.0.0",
  "description": "nothing",
  "main": "nothing",
  "scripts": {
    "start": "nodemon --watch backend --exec babel-node backend/server.js"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.11.1",
    "@babel/node": "^7.10.5",
    "@babel/preset-env": "^7.11.0",
    "nodemon": "^2.0.4"
  }
}

Update: As far console, I added "type": "module", package.json now I get another error

Cannot GET /

Showing in my browser

Sazzad78
  • 13
  • 2
  • your screenshot of the console literally tells you what to do – Krzysztof Krzeszewski Aug 18 '20 at 07:46
  • You are using the wrong command, use `npm start` instead of `node backend/server.js` in the console. Your npm start script uses babel to convert the ES6 modules into CommonJS modules – Reyno Aug 18 '20 at 07:51
  • To me it looks like you are not transpiling ES6 syntax to ES5 syntax for node. Check this out https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/ – jamomani Aug 18 '20 at 07:53
  • Update: As far console, I added "type": "module", package.json now I get another error Cannot GET / Showing in my browser – Sazzad78 Aug 18 '20 at 08:17

2 Answers2

1

Node.js does not support ES6 modules import/export syntax out of the box. Although you can enable it via --experimental-modules flag.

The project already uses Babel which transpile ES6 syntax to ES2015, but you need to add a few more scripts to package.json

  • start: Starts watching the file for changes. Then rebuilds the code and pipes it to babel-node
  • build: When you are ready to deploy the code for production, you build the ES2015 version of the code and you can run that.

package.json:

  "scripts": {
    "start": "nodemon --watch backend --exec babel-node backend/server.js"
    "build": "babel backend/server.js -o lib/server.js",
  },

To build the production code, run npm run build. Once the code is built, you can then run node lib/server.js

lib/server.js will look like:

enter image description here

Adam Azad
  • 10,675
  • 5
  • 25
  • 63
-1

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

I suggest you just editing your package.json like the following.

{
  "name": "web-development",
  "version": "1.0.0",
  "description": "nothing",
  "main": "nothing",
  "scripts": {
    "start": "nodemon --watch backend --exec babel-node backend/server.js"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "type": "module",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.11.1",
    "@babel/node": "^7.10.5",
    "@babel/preset-env": "^7.11.0",
    "nodemon": "^2.0.4"
  }
}
zhoujialei
  • 425
  • 5
  • 10
  • Well, fisrt down vote I've ever received. I would just keep this answer since it works but OK maybe there's better way to really solve the problem rather than make it work. – zhoujialei Aug 18 '20 at 08:02