babel-node vs node: graphql files with import/exports

Question

It appears that NodeJS does not understand import/export commands in graphql files (extension .gql), but babel-node does. The only fix I can come up with is to rename the .gql files to .js files, but I lose syntax highlighting.

Is there a simple fix to have node honor import/exports in files non-js extensions? Attached is my package.json; npm run dev works, but npm run build; npm run start does not:

{
"name": "MyAPI",
"version": "1.0.0",
"description": "MyAPI using GraphQL",
"main": "api/server.js",
"scripts": {
    "build": "babel api -d src --copy-files",
    "start": "node src/server.js",
    "debug": "babel-node --inspect api/server.js",
    "dev": "nodemon api/server.js --watch api --watch tests --ext js,gql --exec babel-node",
    "lint": "eslint api,tests",
    "test": "mocha --require babel-core/register tests"
},
"author": "JML",
"devDependencies": {
    "apollo-client": "^2.0.2",
    "apollo-client-preset": "^1.0.2",
    "babel-eslint": "^7.2.1",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-async-generator-functions": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "chai": "^4.1.2",
    "chai-subset": "^1.6.0",
    "eslint": "^4.3.0",
    "eslint-plugin-babel": "^4.1.2",
    "graphql": "^0.10.5",
    "mocha": "^4.0.1",
    "node-fetch": "^1.7.3",
    "nodemon": "^1.11.0",
    "randexp": "^0.4.6"
},
"dependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.25.0",
    "babel-preset-latest": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "body-parser": "^1.17.1",
    "casual": "^1.5.14",
    "cors": "^2.8.4",
    "eslint": "^4.10.0",
    "express": "^4.15.2",
    "graphql-server-express": "1.0.4",
    "graphql-tag": "^2.5.0",
    "graphql-tools": "^1.1.0",
    "lodash": "^4.17.4",
    "mysql": "^2.14.1",
    "nano": "^6.4.2",
    "treeize": "^2.1.2"
}

}

score 0 · Answer 1 · answered Aug 27 '19 at 00:19

npm install babel-cli babel-preset-env

once you installed those, it will create populated .babelrc file at the root level. you do not need to modify. then you need to load those configurations to the start script in package.json.

"start": "nodemon src/index.js --ext js,graphql --exec babel-node  ",

If you do not know about nodemon, u need to install it globally and it will watch the src/index.js file.

--ext js, graphql // this is optional. it will have vscode to colorize the code.

Lastly, you need to configure babel to support object spread operator.

npm install babel-plugin-transform-object-rest-spread

then add this "transform-object-rest-spread" to the plugins array in the .babelrc file.

.babelrc

{
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    "transform-class-properties",
    "transform-decorators",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    "transform-object-rest-spread"
  ]
}

babel-node vs node: graphql files with import/exports

1 Answers1