Browsersync Couldn't open browser Heroku - node.js

Browsersync: when I use it locally it's all right. When I deploy on Heroku, I have this warning:
Couldn't open browser (if you are using BrowserSync in a headless
environment, you might want to set the open option to false)
this is my package.json:
"scripts": {
"clean": "rimraf dist/{css/*,js/*,images/*}",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"scss": "node-sass --output-style compressed -o dist/css src/scss",
"lint": "eslint src/js || true",
"lint-scss": "stylelint src/scss/*.scss --syntax scss || true",
"uglify": "mkdirp dist/js -p && uglifyjs src/js/*.js -m -c -o dist/js/main.min.js",
"imagemin": "imagemin src/images/* -o dist/images",
"serve": "browser-sync start --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\"",
"build:css": "run-s lint-scss scss autoprefixer",
"build:js": "run-s lint uglify",
"build:images": "run-s imagemin",
"build": "run-s build:*",
"watch:css": "onchange \"src/scss\" -- run-s build:css",
"watch:js": "onchange \"src/js\" -- run-s build:js",
"watch:images": "onchange \"src/images\" -- run-s build:images",
"watch": "run-p serve watch:*",
"postinstall": "run-s build watch"},
"devDependencies": {
"autoprefixer": "^9.0.1",
"browser-sync": "^2.12.8",
"eslint": "^5.2.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"imagemin-cli": "^3.0.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.9.2",
"npm-run-all": "^4.1.3",
"onchange": "^4.1.0",
"postcss-cli": "^6.0.0",
"rimraf": "^2.5.4",
"stylelint": "^9.4.0",
"uglify-es": "^3.3.10"},
"main": ".eslintrc.js"
}
I read that I have to set the open option to false, but I do not understand where and how.
Thanks

Try replacing serve script with this:
"serve": "browser-sync start --no-open --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\""

Related

ts-node-dev: no script to run provided

My NodeJs project have an error message:
dev_api | yarn run v1.15.2
dev_api | warning package.json: No license field
dev_api | $ set debug=* && ts-node-dev --respawn --inspect --transpileOnly ./src/index.ts
dev_api | ts-node-dev: no script to run provided
dev_api | Usage: ts-node-dev [options] script [arguments]
dev_api |
dev_api | error Command failed with exit code 1.
dev_api | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
My package.json:
{
"name": "API_CLIENT_BANK",
"version": "0.0.1",
"description": "Awesome project developed with TypeORM.",
"devDependencies": {
"#types/jest": "^24.0.20",
"#types/node": "^8.0.29",
"ts-jest": "^24.1.0",
"ts-node": "3.3.0",
"typescript": "3.3.3333"
},
"dependencies": {
"#sentry/node": "5.7.1",
"#types/bcryptjs": "^2.4.2",
"#types/body-parser": "^1.17.1",
"#types/cors": "^2.8.6",
"#types/helmet": "^0.0.44",
"#types/jsonwebtoken": "^8.3.5",
"#types/supertest": "^2.0.8",
"#types/swagger-jsdoc": "^3.0.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"class-transformer": "^0.2.3",
"class-validator": "^0.10.2",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.15.4",
"helmet": "^3.21.2",
"jest": "^24.9.0",
"jsonwebtoken": "^8.5.1",
"morgan": "^1.9.1",
"mysql": "^2.17.1",
"prettier": "^1.18.2",
"reflect-metadata": "^0.1.10",
"sqlite3": "^4.0.3",
"supertest": "^4.0.2",
"swagger-jsdoc": "^3.4.0",
"swagger-stats": "^0.95.11",
"swagger-ui-express": "^4.1.2",
"ts-node-dev": "^1.0.0-pre.43",
"tsc-watch": "^4.1.0",
"tslint": "^5.20.0",
"tslint-config-prettier": "^1.18.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-plugin-prettier": "^2.0.1",
"typeorm": "0.2.20"
},
"scripts": {
"tsc": "tsc",
"start": "set debug=* && ts-node-dev --respawn --inspect --transpileOnly ./src/index.ts",
"prod": "tsc && node ./build/index.js",
"schema:drop": "ts-node ./node_modules/typeorm/cli.js schema:drop",
"schema:sync": "ts-node ./node_modules/typeorm/cli.js schema:sync",
"migration:run": "ts-node ./node_modules/typeorm/cli.js migration:run",
"test": "jest --maxWorkers=1 --verbose=true",
"migration:start": "yarn schema:drop && yarn schema:sync && yarn migration:run"
}
}
The error say ts-node-dev: no script to run provided, but I gave it:
set debug=* && ts-node-dev --respawn --inspect --transpileOnly ./src/index.ts
That no script to run provided error is the slightly unhelpful way that ts-node-dev's behaves if it doesn't recognize an option. (This is true as far as v1.1.6, at any rate.)
The problem here is that it doesn't understand the --transpileOnly option. Possibly older versions did, because you see a few examples around the web with that option. But now you need to write --transpile-only.
You'd think it would say something like "Unrecognized option: --transpileOnly", but no.
(The answer from Emefile Francis Waje does include this change, but it's easily missed, because it also proposes two more changes: making ts-node-dev a dev dependency, and using npx. So when I first read that answer, I totally missed the change from --transpileOnly to --transpile-only because I was focusing on the other two changes. So I'm calling this detail out here in a separate answer because it's the root cause of the error that the question mentions.)
Try to run
npm i ts-node-dev --save-dev,
and modify your script to
npx ts-node-dev --respawn --transpile-only --debug ./src/index.ts

How to correct this error? usemin not found

I tried to run npm run build after installing rimraf,copyfiles,imagemin, usemin-cli, cssmin, uglifyjs and htmlmin. And then editing package.json file.
But I got the error
sh: 1: usemin: not found
Here is my Package.json file
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "npx node-sass -o css/ css/",
"watch:scss": "npx onchange 'css/*.scss' -- npm run scss",
"watch:all": "concurrently 'npm run watch:scss' 'npm run lite'",
"clean": "node_modules/rimraf/bin.js dist",
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
"imagemin": "imagemin img/* --out-dir='dist/img'",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
"build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "0.0.7",
"lite-server": "^2.3.0",
"node-sass": "^4.7.2",
"onchange": "^3.3.0",
"parallelshell": "^3.0.1",
"rimraf": "^2.6.2",
"uglifyjs": "^2.4.11",
"usemin-cli": "^0.5.1"
},
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"popper.js": "^1.12.9"
}
}
Tried Google, But Didn't found anything. I am using ubuntu
I think npm is not able to read the path.
I added the path
node_modules/.bin/usemin
In Place of usemin in the script above.
It Worked.
this is a problem with the usemin-cli version, upgrade to version 0.6.0, I'm doing the same course and it works

Babel don't compile .graphql files inside the build folder on "babel server --out-dir build"

Some introduction:
Our app uses Heroku as a server.
So, after pushing code it runs npm start as in my package.json
My current version of nodeJS in a laptop: v8.16.2, npm: 6.4.1.
In package.json:
"engines": {
"node": "10.16.3",
"npm": "6.9.0"
},
The problem:
Currently, it runs like this "start": "node build/index.js"
. Last changes were about adding graphql files.
npm start show Error: ENOENT: no such file or directory, open '/app/build/apollo/nCourse/nCourse.graphql'
We don't run with node server/index.js because of using new ecma script features(not common js) like import and export
The question
I see two solutions in this problem
Make something which will create the file with graphql extension in build folder
Maybe update version of nodeJS if it can understand es import and export
Package.json
{
"name": "wunder-education",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "10.16.3",
"npm": "6.9.0"
},
"scripts": {
"start": "node build/index.js",
"server": "nodemon --exec babel-node server/index.js",
"server:prodDB": "MONGO_URL=mongodb://saturdaykids:52turdayk1ds3#ds117866.mlab.com:17866/saturdaykids-prod nodemon --exec babel-node server/index.js",
"clean": "rm -rf node_modules",
"clean:admin": "npm run clean --prefix admin",
"clean:all": "concurrently \"npm run clean\" \"npm run clean:admin\"",
"install:admin": "npm install --prefix admin",
"admin": "npm run start --prefix admin",
"build:admin": "npm run build --prefix admin",
"build:server": "babel server --out-dir build",
"build": "concurrently \"npm run build:server\" \"npm run build:admin\"",
"dev": "concurrently \"npm run server\" \"npm run admin\"",
"postinstall": "npm run install:admin",
"heroku-postbuild": "npm run build",
"format:server": "prettier --write server/**/**/**/*.js",
"format:admin": "prettier --write admin/src/**/**/*.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#apollo/react-hooks": "^3.1.3",
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/node": "^7.2.2",
"#babel/plugin-transform-runtime": "^7.7.4",
"#babel/preset-env": "^7.0.0",
"#babel/runtime": "^7.3.1",
"#badgeup/badgeup-node-client": "^2.0.3",
"airtable": "^0.5.10",
"apollo-boost": "^0.4.4",
"apollo-server-express": "^2.9.13",
"aws-sdk": "^2.456.0",
"babel-plugin-module-resolver": "^3.1.1",
"body-parser": "^1.18.3",
"chalk": "^2.4.1",
"concurrently": "^3.5.1",
"connect-mongo": "^2.0.1",
"cors": "^2.8.5",
"express": "^4.16.3",
"express-force-https": "^1.0.0",
"express-jwt": "^5.3.1",
"express-session": "^1.15.6",
"express-validator": "^5.3.1",
"graphql": "^14.5.8",
"jsonwebtoken": "^8.4.0",
"lodash": "^4.17.15",
"mongoose": "^5.1.2",
"mongoose-fill": "^1.7.0",
"mongoose-paginate": "^5.0.3",
"multer": "^1.4.1",
"multer-s3": "^2.9.0",
"nan": "^2.14.0",
"nodemon": "^1.17.5",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^5.0.1",
"request": "^2.87.0",
"socket.io": "^2.1.1",
"socket.io-client": "^2.2.0",
"supertest": "^3.4.2"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.4.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-import-resolver-babel-module": "^5.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.17.0",
"prettier": "^1.16.4"
}
}
Using rsync was my choice too.
I used it slightly differently like so:
"script": {
...
"rsync:graphql": "rsync -r --include '*/' --include '*.graphql' --exclude='*' --prune-empty-dirs 'src/' 'dist/'",
"build": "BABEL_ENV=build babel src -d dist --source-maps --no-comments && npm run rsync:graphql",
...
}
In short, it saying: recursively copy all .graphql files from the src directory to the dist directory and follow the same folders structure.
rsync is basically a powerful transfer files utility for Unix-like operating systems. You might have it shipped with your OS system.
In my case, I needed to install it in my CI/CD pipeline (CircleCi) and added to my Dockerfile commands.
Hope it helps! Will be happy to hear about other solutions.
EDIT:
You can also watch for changes made in any .graphql files by adding the following to your nodemonConfig in your package.json:
"nodemonConfig": {
"ext": "env,js,graphql,json",
"watch": [
".env",
"./src"
],
}
Finally it solved by copy and pasting .graphql files inside the build/apollo by this command
rsync -a --prune-empty-dirs --include 'server/apollo/*' --include '*.graphql' 'server/apollo' 'build'
In package.json:
"syncGraphql": "rsync -a --prune-empty-dirs --include 'server/apollo/*' --include '*.graphql' 'server/apollo' 'build'",
"build": "concurrently \"npm run build:server\" \"npm run build:admin\" \"npm run syncGraphql\"",

Node Sass does not yet support Windows 64-bit

I am running protractor UI automation project and try to run test with yarn test and received following build error
Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime
I am on Windows 10 (64). below are the related entries in package.json
"sass-lint": "^1.10.2",
"sass-loader": "6.0.6",
"sasslint-webpack-plugin": "^1.0.4",
"node-sass": "^4.0.0"
npm - 5.6.0
node - v9.11.1
yarn - 1.5.1
{
"name": "Avatarwebapps",
"version": "3.0.0",
"description": "Avatar Apps",
"private": true,
"author": "Avatar DST",
"sasslintConfig": ".sass-lint.yml",
"contributors": [
"Brian Kinch<brian.finch#Avatar.com.au>"
],
"repository": {
"type": "git",
"url": "https://github.com/Avatartest/Avatar.Digital.Apps.git"
},
"bugs": {
"url": "https://Avatartest.atlassian.net/"
},
"scripts": {
"clean": "rimraf node_modules",
"docs": "typedoc --options typedoc.json src/app/app.component.ts",
"e2e": "protractor protractor.e2e.conf.js --params.environment",
"smoke": "protractor protractor.smoke.conf.js --params.environment",
"css:local:test": "cd backstop/development/maui && backstop test",
"css:local:approve": "cd backstop/development/maui && backstop approve",
"extractCustomer": "node extractCustomer.js",
"lint:ts:fix": "tslint -p tsconfig.json -c tslint.json --fix",
"lint:ts": "tslint -p tsconfig.json -c tslint.json",
"lint:sass": "sass-lint -v",
"lint:cpd": "rimraf reports/cpd && mkdir reports/cpd && jscpd -o reports/cpd/report.json -l 20 --limit 10 > reports/cpd/report.txt",
"postinstall": "yarn webdriver:update && npm rebuild node-sass",
"server": "webpack-dev-server --inline --progress --port 8080",
"start": "webpack-dev-server --config config/webpack/webpack.config.myaccount.js --inline --progress --port 8080 --https --cert ./ssl/server.crt --key ./ssl/server.key",
"start:e2e": "webpack-dev-server --config config/webpack/webpack.config.e2e.js --inline --quiet --https --port 8080",
"build": "rimraf dist/non-prod && webpack --config config/webpack/webpack.config.build.js --progress --profile --bail",
"build:e2e": "rimraf config/dist && webpack --config config/webpack/webpack.config.localhost.js --progress --profile --bail",
"build:prod": "rimraf dist/prod && webpack --config config/webpack/webpack.config.prod.js --progress --profile --bail",
"build:prod:analysis": "rimraf dist/prod && webpack --config config/webpack/webpack.config.prod.analyzer.js --progress --profile --bail",
"build:aot": "rimraf aot/ dist/aot && node --max_old_space_size=6244 ./node_modules/webpack/bin/webpack.js --config webpack.config.aot.js --progress --profile --bail --display-error-details",
"test": "karma start",
"test:debug": "karma start --browsers Chrome",
"test:ci": "karma start --browsers ChromeHeadless",
"test:watch": "karma start --no-single-run --auto-watch",
"test:watch:debug": "karma start --no-single-run --auto-watch --browsers Chrome",
"test:mockserver": "ts-node ./server-ts/tests/runMockserverTests.ts",
"webdriver:start": "webdriver-manager start",
"webdriver:update": "webdriver-manager update --ie",
"webdriver:clean": "webdriver-manager clean",
"build:service:nonprod": "rimraf dist/non-prod && webpack --config config/webpack/webpack.config.build-cache.js --progress --profile --bail",
"build:dev:cache:nonprod": "yarn build:service:nonprod && yarn precache:nonprod && yarn server:nonprod",
"build:cache:nonprod": "yarn build && yarn precache:nonprod",
"build:cache:prod": "yarn build:prod && yarn precache:prod",
"build:cache:aot": "yarn build:aot && yarn precache:aot",
"server:aot": "node tools/simple-server.js",
"server:aot:start:bg": "forever start -t -p . -al server.log tools/simple-server.js -p 8080",
"server:aot:stop:bg": "forever stop tools/simple-server.js -p 8080",
"precache:nonprod": "sw-precache --verbose --config=config/precacheConfig-nonprod.js",
"precache:prod": "sw-precache --verbose --config=config/precacheConfig-prod.js",
"precache:aot": "sw-precache --verbose --config=config/precacheConfig-aot.js",
"mockserver": "ts-node-dev ./server-ts/index.ts",
"mockserver:start:bg": "forever start -t -p . --workingDir . -al stub.log --id mockserver ./node_modules/ts-node/dist/bin.js ./server-ts/index.ts",
"mockserver:stop:bg": "forever stop mockserver",
"reports:plato": "yarn compile:ts && rimraf reports/plato && plato -r -d reports/plato -n -t \"My Account\" srcJs",
"reports:complexity": "yarn compile:ts && rimraf reports/complexity && mkdir reports/complexity && cd srcJs && ../node_modules/jscomplexity/bin/jscomplexity-cli.js > ../reports/complexity/report.txt",
"compile:ts": "rimraf srcJs && tsc -p src/tsc.json --outDir srcJs",
"compile:e2e": "tsc --project e2etsc.json",
"preflight": "yarn && yarn lint:sass && yarn lint:ts && yarn test:mockserver && yarn test:ci && yarn build:aot && yarn precache:aot && echo 'Preflight checks PASSED!' || echo 'Preflight checks FAILED!'"
},
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.0",
"#angular/cdk": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"#typed/hashmap": "^1.0.1",
"#types/body-parser": "^1.16.8",
"#types/express-fileupload": "^0.1.1",
"angular-progress-http": "1.0.0",
"angular2-text-mask": "^8.0.1",
"angulartics2": "^2.2.2",
"bootstrap": "3.3.7",
"core-js": "^2.4.1",
"css-element-queries": "^0.4.0",
"hammerjs": "2.0.8",
"jwt-decode": "^2.1.0",
"jwt-simple": "^0.5.1",
"lodash": "^4.17.4",
"moment": "^2.17.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.7",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular-devkit/core": "0.3.2",
"#angular/cli": "~1.7.3",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#ngtools/webpack": "1.10.2",
"#octopusdeploy/octopackjs": "0.0.7",
"#types/core-js": "^0.9.40",
"#types/express": "^4.11.0",
"#types/form-data": "0.0.33",
"#types/hammerjs": "^2.0.34",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/lodash": "^4.14.66",
"#types/node": "^7.0.5",
"#types/request": "^0.0.44",
"#types/source-map": "^0.5.0",
"#types/uglify-js": "^2.0.27",
"#types/webpack": "~3.8.11",
"adal-node": "^0.1.27",
"angular-router-loader": "^0.8.2",
"angular2-template-loader": "^0.6.0",
"assets-webpack-plugin": "^3.5.1",
"autoprefixer": "^7.2.3",
"azure-keyvault": "^3.0.1-preview",
"backstopjs": "^3.0.36",
"body-parser": "^1.17.2",
"case-sensitive-paths-webpack-plugin": "^2.1.1",
"chai": "^4.0.2",
"circular-dependency-plugin": "^4.2.1",
"codelyzer": "^4.0.1",
"command-line-args": "^4.0.1",
"command-line-usage": "^4.0.0",
"concurrently": "^3.1.0",
"copy-webpack-plugin": "~4.4.1",
"css-loader": "^0.28.4",
"ejs-compiled-loader": "^1.1.0",
"express": "^4.15.3",
"express-fileupload": "^0.1.4",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "^1.1.5",
"forever": "^0.15.3",
"fs": "0.0.2",
"git-rev-2": "^0.1.0",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.29.0",
"http-proxy-middleware": "^0.17.4",
"inversify": "^4.10.0",
"istanbul-instrumenter-loader": "^3.0.0",
"jasmine-bamboo-reporter": "0.0.2",
"jasmine-core": "~2.8.0",
"jasmine-reporters": "^2.2.0",
"jasmine-spec-reporter": "~4.2.1",
"jscomplexity": "^2.0.0",
"jscpd": "^0.6.15",
"json-loader": "^0.5.4",
"jsonfile": "^3.0.0",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "~1.1.0",
"karma-junit-reporter": "^1.2.0",
"karma-mocha-reporter": "^2.2.0",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.4",
"mkdirp": "^0.5.1",
"mocha": "^3.1.2",
"mocha-junit-reporter": "^1.12.0",
"node-sass": "^4.0.0",
"ntypescript": "^1.201609302242.1",
"null-loader": "0.1.1",
"octopus-deploy": "^2.0.0",
"open-browser-webpack-plugin": "0.0.3",
"optimize-css-assets-webpack-plugin": "^3.1.1",
"optimize-js-plugin": "^0.0.4",
"plato": "^1.7.0",
"postcss-loader": "^1.0.0",
"protractor": "~5.1.2",
"protractor-browser-logs": "^1.0.351",
"protractor-jasmine2-html-reporter": "0.0.7",
"raw-loader": "0.5.1",
"request": "^2.83.0",
"rimraf": "^2.5.4",
"sass-lint": "^1.10.2",
"sass-loader": "6.0.6",
"sasslint-webpack-plugin": "^1.0.4",
"should": "^11.1.1",
"strip-loader": "^0.1.2",
"style-loader": "^0.19.1",
"sw-precache": "^5.1.1",
"ts-loader": "^2.3.3",
"ts-md5": "^1.2.2",
"ts-mocks": "^0.2.2",
"ts-node": "~4.1.0",
"ts-node-dev": "^1.0.0-pre.16",
"tslib": "^1.5.0",
"tslint": "~5.9.1",
"tslint-eslint-rules": "4.1.1",
"tslint-loader": "3.5.3",
"typedoc": "^0.7.1",
"typescript": "~2.5.3",
"uglifyjs-webpack-plugin": "^1.1.8",
"url-loader": "^0.6.2",
"webpack": "3.11.0",
"webpack-bundle-analyzer": "^2.4.0",
"webpack-dev-server": "~2.11.0",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"zip-dir": "^1.0.2"
}
}
I had same problem but didn't have to downgrade the node version. I just updated the package.json file node-sass entry to match my node version from the table on the github page. https://github.com/sass/node-sass/
I'm using node 14.15.3 so I put "node-sass": "^4.14.0" in dependencies, did another npm install, and it worked.

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

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"
}
}
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"
]
}

Resources