Webstorm 2018.3/Windows 10
v8.0.0/6.4.1
JetBrains ECMAScript6 in Webstorm Babel FileWatcher
I added Babel
through the steps
For a local repository I installed npm i --save-dev @babel/cli @babel/core @babel/preset-env @babel/plugin-object-proposed-rest-spread
added .babelrc
in the root folder with following:
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
Configured my Run Configuration for npm start
since my package.json
has "start": nodemon app.js
in it.
I am using mongoose
to store and obtain information from MongoDB and using GraphQL to provide an endpoint for queries/mutation
here is one of my mutation
(function) within my code:
createEvent: (args) => {
const event = new Event({
title: args.eventInput.title,
description: args.eventInput.description,
price: +args.eventInput.price,
date: new Date(args.eventInput.date)
});
return event
.save()
.then(result => {
console.log(result);
return { ...result._doc };
})
.catch(err => {
console.log(err);
throw err;
});
}
Error:
SyntaxError: Unexpected token ...
According to SE Query to Configure Babel with Webstorm for node.js project I tried creating a node.js app
but I now get an Error:
Error: querySrv ENOTFOUND _mongodb._tcp.undefined-p8e7q.mongodb.net
at errnoException (dns.js:50:10)
at QueryReqWrap.onresolve [as oncomplete] (dns.js:244:19)
code: 'ENOTFOUND',
errno: 'ENOTFOUND',
syscall: 'querySrv',
hostname: '_mongodb._tcp.undefined-p8e7q.mongodb.net'
I now instead replace { ...result._doc }
with return result._doc
and the code works fine but I wish to use the spread operator within other blocks of code.
I understand that the error has nothing to do with Webstorm
but I do not see any other alternative to this problem
Node.js Configuration
created by right-click on app.js
file and Create 'app.js'
from menu. I installed npm i --save-dev @babel/register
and changed it to -r @babel/register
as mentioned in the blog
app.js
const express = require('express'); // Add Express Module
const bodyParser = require('body-parser'); // Add Body-Parser Middleware for JSON handling in Requests
const graphqlHttp = require('express-graphql'); // Add Middleware for GraphQL Resolvers over Express HTTP
const { buildSchema } = require('graphql'); // Javascript Object-Destructuring (pull objects from packages)
const mongoose = require('mongoose'); // MongoDB Third-Party package
const Event = require('./models/event'); // MongoDB Event Model
const app = express();
app.use(bodyParser.json()); // JSON parsing Middleware added
app.use('/graphql', graphqlHttp({
schema: buildSchema(`
type Event {
_id: ID!
title: String!
description: String!
price: Float!
date: String!
}
input EventInput {
title: String!
description: String!
price: Float!
date: String!
}
type RootQuery {
events: [Event!]!
}
type RootMutation {
createEvent(eventInput: EventInput): Event
}
schema {
query: RootQuery
mutation: RootMutation
}
`),
rootValue: {
events: () => {
return Event.find()
.then(events => {
return events.map( event => {
event._doc._id = event.id;
return event._doc;
});
})
.catch(err => {
console.log(err);
throw err;
})
},
createEvent: (args) => {
const event = new Event({
title: args.eventInput.title,
description: args.eventInput.description,
price: +args.eventInput.price,
date: new Date(args.eventInput.date)
});
return event
.save()
.then(result => {
console.log(result);
return { ...result._doc };
// return result._doc
})
.catch(err => {
console.log(err);
throw err;
});
}
},
graphiql: true
}));
mongoose.connect(
`mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@${process.env.MONGO_CLUSTER_NAME}-p8e7q.mongodb.net/${process.env.MONGO_DB_NAME}?retryWrites=true`)
.then( () => {
app.listen(3000);
}).catch(err => {
console.log(err);
});
package.json
I added some weird babel packages as some desperate attempt to get it up and running which is in dev-dependencies
{
"name": "graphql-express-app",
"version": "0.0.4",
"description": "Academind's YouTube Series on GraphQL-Express-React",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon app.js"
},
"keywords": [
"graphql",
"express",
"node.js"
],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/preset-stage-2": "^7.0.0",
"babel-preset-stage-2": "^6.24.1",
"body-parser": "^1.18.3",
"express": "^4.16.4",
"express-graphql": "^0.7.1",
"graphql": "^14.0.2",
"mongoose": "^5.4.1"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/register": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"nodemon": "^1.18.9"
}
}
I stripped down your example and added a minimal version of what you need to get it up and running.
Basically what you're missing is the part where babel actually goes and transpiles your code. I don't know if webstorm does that for you, I'm using VS code.
.babelrc:
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
package.json (deps and scripts only, rest ommited):
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --exec babel-node app.js"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"nodemon": "^1.18.9"
}
Minimal app.js:
const o = {
a: 'a',
b: 'b',
};
const o2 = { ...o };
console.log(o2);
// Outputs: { a: 'a', b: 'b' }
You can save yourself from having to transpile nodejs code by using a recent version. The spread operator is supported in node from version 8.6.0 up: https://node.green/#ES2018-features-object-rest-spread-properties
Hope that helps!