Related
I'm trying to use Node and React together and I'm having a terrible time getting them to play nicely. Any guidance in pointing out what I'm doing wrong would be hugely helpful.
As a precursor, I've already reviewed this question and tried everything I can based on the answers there, but no luck.
Setup
I'm currently running Node version 16.15.1
I've installed React via the instructions found here
Attempt 1
Straight out of the gate, I get this error: Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
index.js is a standard React file. Line 1 starts like this: import React from 'react';
Attempt 2
One of the answers was to add "type": "module" to the package.json file, but that produced this error: ReferenceError: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\path\to\app\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
The lift for me here makes this impractical. I'm using a Node template that has a ton of stuff baked in already...dozens of files, and probably hundreds of 'require' statements. And many the files that were 'required' would need modification to export everything in the right format. It's just...a lot.
Attempt 3
So then I tried to add the module type to the script tag itself, i.e. <script type="module" src="blah">. This produced the following error: Uncaught SyntaxError: Unexpected token '<' (at index.js:9:3).
Attempt 4
Finally, I tried changing the React file from index.js to index.mjs which produced this error: Uncaught SyntaxError: Cannot use import statement outside a module (at index.mjs:1:1).
I've also tried combining the .mjs file extension with adding the type="module" to the script tag with no luck. Any help would be very much appreciated!
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
Additional Context
I've started with meanjs.org as the template, but it's several years out of date. I've made updates to get the server running, and have scrubbed Angular out of the public directory, where I installed React in. I can run React by itself without issues, but when I try to add a root element in my node app and include React's index.js file, it most definitely imports the file and that's where it chokes.
Here's my package.json file:
{
"name": "test",
"description": "Test app",
"version": "0.1.0",
"private": false,
"author": "Test",
"license": "MIT",
"repository": {
"type": "git",
"url": ""
},
"engines": {
"node": ">=16.0.0",
"npm": ">=8.0.0"
},
"scripts": {
"update": "npm update && npm prune",
"clean": "rm -rf node_modules/ public/lib/",
"reinstall": "npm cache clean && npm run clean && npm install",
"start": "gulp",
"start:prod": "gulp prod",
"start:debug": "node-debug --web-host 0.0.0.0 server.js & gulp debug",
"gulp": "gulp",
"lint": "gulp lint",
"test": "gulp test",
"test:server": "gulp test:server",
"test:server:watch": "gulp test:server:watch",
"test:client": "gulp test:client",
"test:e2e": "gulp test:e2e",
"test:coverage": "gulp test:coverage",
"generate-ssl-certs": "scripts/generate-ssl-certs.sh",
"seed": "gulp seed",
"seed:prod": "gulp seed:prod",
"seed:test": "gulp seed:test",
"snyk-protect": "snyk protect",
"prepare": "npm run snyk-protect"
},
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"acl": "^0.4.11",
"amazon-s3-uri": "0.0.3",
"async": "~2.5.0",
"aws-sdk": "^2.548.0",
"body-parser": "^1.19.0",
"chalk": "~2.1.0",
"compression": "^1.7.4",
"connect-flash": "~0.1.1",
"connect-mongo": "^4.6.0",
"cookie-parser": "^1.4.4",
"del": "~3.0.0",
"eslint-config-airbnb": "~6.0.2",
"express": "^4.17.1",
"express-hbs": "^1.0.5",
"express-session": "^1.17.0",
"generate-password": "~1.3.0",
"glob": "^7.1.4",
"gulp": "^4.0.2",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~4.0.0",
"gulp-concat": "~2.6.1",
"gulp-csslint": "^1.0.1",
"gulp-csso": "^3.0.1",
"gulp-eslint": "^4.0.0",
"gulp-imagemin": "~5.0.0",
"gulp-less": "^4.0.0",
"gulp-load-plugins": "~1.5.0",
"gulp-ng-annotate": "~2.0.0",
"gulp-nodemon": "^2.4.1",
"gulp-refresh": "^1.1.0",
"gulp-rename": "^1.2.3",
"gulp-rev": "~8.0.0",
"gulp-sass": "^5.1.0",
"gulp-uglify": "^3.0.2",
"helmet": "^3.21.1",
"imagemin-pngquant": "~6.0.0",
"jasmine-core": "~3.0.0",
"lodash": "^4.17.15",
"lusca": "^1.5.2",
"method-override": "^2.3.10",
"mongoose": "^6.4.0",
"morgan": "^1.9.1",
"multer": "^1.3.1",
"multer-s3": "^2.9.0",
"node-sass": "^6.0.0",
"nodemailer": "~4.0.1",
"owasp-password-strength-test": "~1.3.0",
"passport": "~0.3.2",
"passport-facebook": "~2.1.1",
"passport-github": "~1.1.0",
"passport-google-oauth": "~1.0.0",
"passport-linkedin": "~1.0.0",
"passport-local": "~1.0.0",
"passport-paypal-openidconnect": "^0.1.1",
"passport-twitter": "~1.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"run-sequence": "~2.1.0",
"sass": "^1.53.0",
"serve-favicon": "^2.5.0",
"snyk": "^1.234.2",
"socket.io": "^2.3.0",
"validator": "~9.4.1",
"web-vitals": "^2.1.4",
"winston": "~2.3.1",
"wiredep": "~4.0.0"
},
"devDependencies": {
"coveralls": "^2.13.3",
"gulp-istanbul": "^1.1.3",
"gulp-mocha": "~3.0.1",
"gulp-protractor": "~4.1.0",
"karma": "6.4.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage": "^1.1.2",
"karma-jasmine": "^1.1.2",
"karma-mocha-reporter": "^2.2.5",
"karma-ng-html2js-preprocessor": "~1.0.0",
"semver": "~5.4.1",
"should": "~11.2.1",
"supertest": "~3.0.0"
},
"snyk": true,
"proxy": "http://localhost:3000"
}
The package.json file from React is unchanged from the original install.
Final note: I'm a self-taught developer. Please be gentle. :)
After cloning the repository from Github then install npm and try to execute ember s. but I got this error. Then I delete node modules directory and package-lock.json file and install npm again. But i can't solve it.I am googling this error but can't solve it. Plz, Help me.
Here is my Error:
Build Error (broccoli-persistent-filter:EslintValidationFilter) in helpers/flash-
message.js
Package subpath './lib/util/traverser' is not defined by "exports" in
/home/ag/Office/ecommerce/front-end/node_modules/eslint/package.json
Stack Trace and Error Report: /tmp/error.dump.a671c24c39f689554c47c73d068f7e9f.log
My Package.json:
{
"name": "front-end",
"version": "0.0.0",
"private": true,
"description": "Small description for front-end goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.6.0",
"#ember/optional-features": "^0.7.0",
"broccoli-asset-rev": "^3.0.0",
"ember-ajax": "^5.0.0",
"ember-aria-tabs": "^3.0.0",
"ember-auto-import": "^1.10.1",
"ember-cli": "~3.12.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.7.3",
"ember-cli-bootstrap-4": "^0.12.0",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-flash": "^2.1.0",
"ember-cli-form-data": "^2.1.1",
"ember-cli-htmlbars": "^3.0.1",
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-moment-shim": "^3.8.0",
"ember-cli-sass": "^10.0.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-swiper": "^1.0.6",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-composable-helpers": "^2.4.0",
"ember-concurrency": "^1.3.0",
"ember-cp-validations": "^4.0.0-beta.12",
"ember-crumbly": "^3.0.1",
"ember-data": "~3.12.0",
"ember-drag-drop": "^0.9.0-beta.0",
"ember-export-application-global": "^2.0.0",
"ember-fetch": "^8.1.0",
"ember-font-awesome": "^4.0.0-rc.4",
"ember-load-initializers": "^2.0.0",
"ember-local-storage": "^1.7.2",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-modal-dialog": "^3.0.1",
"ember-moment": "^8.0.1",
"ember-pickr": "^2.2.1",
"ember-power-select": "^3.0.2",
"ember-qunit": "^4.4.1",
"ember-resize": "^0.3.4",
"ember-resolver": "^5.0.1",
"ember-source": "~3.12.0",
"ember-toggle": "^7.1.0",
"ember-tooltips": "^3.4.5",
"ember-uuid": "^2.1.0",
"ember-welcome-page": "^4.0.0",
"eslint-plugin-ember": "^6.2.0",
"eslint-plugin-node": "^9.0.1",
"loader.js": "^4.7.0",
"popper.js": "^1.16.1",
"qunit-dom": "^0.8.4",
"sass": "^1.30.0"
},
"engines": {
"node": "8.* || >= 10.*"
},
"dependencies": {
"drift-zoom": "^1.5.0"
}
}
If anyone has any idea about this error then comment or answer it. I will vote and accept the answer.
Finally, I fix my issue by downgrading the node version from 17 to 16.
I have two repos:
my-ui-lib: a UI library imported as a dependency in package.json
my-app: a React app that imports components from my-ui-lib
I've bundled my UI library and am trying to update the package.json so that I can import the components like this:
import Button from "my-ui-lib/components/Button";
instead of
import Button from "my-ui-lib/build/components/Button";
In my my-ui-lib's package.json I have added this:
"exports": {
"./components/": "./build/components/",
"./constants/": "./build/constants/",
"./helpers/": "./build/helpers/",
"./hooks/": "./build/hooks/",
"./icons/": "./build/icons/"
},
I have also confirmed that the build folder is nested as expected when I open up node_modules inside of my-app:
▾ my-ui-lib/
▾ build/
▸ components/
▸ constants/
▸ helpers/
▸ hooks/
▸ icons/
However, I tried importing my button from just the root but it complains:
./src/App.js
Module not found: Can't resolve 'my-ui-lib/components/Button' in '/Users/edmund/Documents/src/my-app/src'
Only when I change it to import Button from "#twicapp/ui/build/components/Button"; does my page load properly.
I've tried updating the package.json file manually by:
opening up my-app/node_modules/my-ui-lib/package.json
changing up the exports field to remove slashes, periods, etc.
refreshing my my-app server
But nothing seems to work. Am I missing something?
Here's my my-ui-lib package.json:
{
"name": "my-ui-lib",
"version": "0.12.41-beta.43",
"engines": {
"node": "14.x"
},
"exports": {
"./components/": "./build/components/",
"./constants/": "./build/constants/",
"./helpers/": "./build/helpers/",
"./hooks/": "./build/hooks/",
"./icons/": "./build/icons/"
},
"files": [
"build"
],
"dependencies": {
"#ant-design/icons": "4.3.0",
"#emotion/react": "11.4.1",
"#emotion/styled": "11.3.0",
"#fullcalendar/core": "4.4.2",
"#fullcalendar/daygrid": "4.4.2",
"#fullcalendar/react": "4.4.2",
"#material-ui/core": "4.12.3",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "4.0.0-alpha.60",
"#mui/lab": "5.0.0-alpha.45",
"#mui/material": "5.0.0-rc.0",
"#tippyjs/react": "4.2.5",
"antd": "3.26.20",
"clone": "2.1.2",
"cloudinary-core": "2.11.4",
"currency-symbol-map": "5.0.1",
"date-fns": "2.23.0",
"dompurify": "2.3.3",
"final-form": "4.20.2",
"history": "5.0.1",
"lodash": "4.17.21",
"notistack": "1.0.10",
"polished": "3.7.2",
"prop-types": "15.7.2",
"react-final-form": "6.5.3",
"react-helmet": "6.1.0",
"react-hook-form": "7.15.1",
"react-progressbar": "15.4.1",
"react-text-mask": "5.4.3",
"recharts": "2.0.0-beta.8",
"styled-theme": "0.3.3"
},
"devDependencies": {
"#babel/cli": "7.15.7",
"#babel/core": "7.15.5",
"#babel/plugin-proposal-class-properties": "7.14.5",
"#babel/plugin-proposal-decorators": "7.15.4",
"#babel/plugin-proposal-do-expressions": "7.14.5",
"#babel/plugin-proposal-export-default-from": "7.14.5",
"#babel/plugin-proposal-export-namespace-from": "7.14.5",
"#babel/plugin-proposal-function-bind": "7.14.5",
"#babel/plugin-proposal-function-sent": "7.14.5",
"#babel/plugin-proposal-json-strings": "7.14.5",
"#babel/plugin-proposal-logical-assignment-operators": "7.14.5",
"#babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
"#babel/plugin-proposal-numeric-separator": "7.14.5",
"#babel/plugin-proposal-optional-chaining": "7.14.5",
"#babel/plugin-proposal-pipeline-operator": "7.15.0",
"#babel/plugin-proposal-throw-expressions": "7.14.5",
"#babel/plugin-syntax-dynamic-import": "7.8.3",
"#babel/plugin-syntax-import-meta": "7.10.4",
"#babel/preset-env": "7.15.6",
"#babel/preset-react": "7.14.5",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^21.0.0",
"#rollup/plugin-image": "^2.1.1",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^13.0.5",
"#rollup/plugin-url": "^6.1.0",
"#storybook/addon-a11y": "6.3.12",
"#storybook/addon-actions": "6.3.12",
"#storybook/addon-essentials": "6.3.12",
"#storybook/addon-knobs": "6.3.1",
"#storybook/addon-links": "6.3.12",
"#storybook/addon-postcss": "^2.0.0",
"#storybook/addon-viewport": "6.3.12",
"#storybook/addons": "6.3.12",
"#storybook/preset-create-react-app": "3.2.0",
"#storybook/react": "6.3.12",
"#storybook/storybook-deployer": "2.8.10",
"#svgr/rollup": "^5.5.0",
"#svgr/webpack": "^5.5.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "27.2.1",
"babel-loader": "8.2.2",
"babel-plugin-styled-components": "1.13.2",
"dotenv-webpack": "^7.0.3",
"eslint": "7.32.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-import": "2.25.2",
"eslint-plugin-jest": "24.4.2",
"eslint-plugin-json": "3.1.0",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.26.0",
"html-webpack-plugin": "^5.4.0",
"husky": "7.0.2",
"jest": "27.2.1",
"lint-staged": "11.1.2",
"prettier": "2.4.1",
"prettier-eslint-cli": "5.0.1",
"pretty-quick": "3.1.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router": "5.2.1",
"react-router-dom": "5.3.0",
"rollup": "^2.58.0",
"rollup-plugin-auto-external": "^2.0.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-multi-input": "^1.3.1",
"rollup-plugin-styles": "^3.14.1",
"styled-components": "5.3.1",
"webpack": "^5.58.2"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"styled-components": "^5.2.3"
},
"scripts": {
"start": "start-storybook -p 9009",
"test": "jest",
"build": "rollup --config",
"build-storybook": "build-storybook -o ./docs -s ./.storybook/static",
"deploy-storybook": "storybook-to-ghpages --out=docs",
"eslint": "eslint --ignore-path .gitignore ./",
"eslint:fix": "eslint --fix --ignore-path .gitignore ./",
"prettier": "prettier -c ./",
"prettier:fix": "prettier --write ./"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"lint-staged": {
"*.js": "eslint --cache --fix"
}
}
I couldn't get exports to work. This is how I worked around it. I had to change the build + publish only the dist folder
You'd better check your my-app project, make sure which build tools you use(webpack or rollup or something else?)
Build tools often offer your some fields to configure the moduleResolution strategy in their configuration file, such as webpack.config.json.
By the way, exports field of package.json will work well when you take node module resolution to import module.
For example:
set up a project like this:
tool
/-- dist
/-- add.js
/-- types
/-- index.d.ts
package.json
add.js:
module.exports.add = function(a, b) { return a + b }
index.d.ts:
/**
* add two number
*
* #example
* ```typescript
* const c = add(1, 2)
*
* // result: c === 3
* ```
*/
export declare function add(a: number, b: number): number;
package.json:
{
"name": "tool",
"exports": {
".": {
"require": "./dist",
},
"./*": {
"require":"./dist/*.js",
"types": "./types/index.d.ts"
}
}
}
in tool directory, run yarn link;
then, setup another project to import tool package, this project will be like:
practice
main.js
package.json
main.js:
const { add } = require("tool/add")
add(1, 3)
package.json:
{
"name": "practice"
}
then, in practice directory, run yarn link tool, you will see the changes:
practice
/-- node_modules
/-- tool
package.json
main.js
When you open the practice project and look at main.js in vscode, you will find that there're no type hints about add! But we have configured the types in exports field of package.json!
To your surprise , we could run main.js by node main.js, no errors no warns!
This is because when node executes the file, it will look at exports field and follow its content, but vscode type hints system don't know this and never give you a hint!
how to solve it?
Just add a jsconfig.json file under practice directory:
{
"compilerOptions": {
"moduleResolution": "Node16"
}
}
Do you get it? Yes, we adopt this format to tell vscode the moduleResolution strategy, then you could see the type hints when you hover on the add.
So, when you build your app, the build tools maybe offer you configuration field to resolve the module path. Search it!
I've built a simple React/Redux app and am using Parcel for the bundler. It works fine in development mode, that is, using the script
"dev": "parcel ./src/index.html",
but when I tried to do
"build": "parcel build ./src/index.html",
I got the following error
/Users/abc/Documents/Projects/sandbox/smart/src/styles/main.scss: Cannot find module 'sass' from '/Users/abc/Documents/Projects/sandbox/smart/src/styles'
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:97:35
at processDirs (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:244:39)
at isdir (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:251:32)
at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:23:69
at FSReqWrap.oncomplete (fs.js:152:21)
This is the first time I've tried to build an app using Parcel and I'm lost. I'm using node-sass to import my sass files directly -- perhaps this has something to do with that.
The referenced file (main.scss) is referenced in App.js like this
import "../../styles/main.scss";
and is the first sass file to be included (App is loaded into the DOM like this in index.js:
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
)
This is running under Node 11.15. My package.json follows -- any hints or help much appreciated!
{
"name": "friender",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jest": {
"setupFiles": ["jest-localstorage-mock"]
},
"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "jest"
},
"prettier": {
"semi": false
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#types/jest": "^24.0.18",
"babel-eslint": "^10.0.3",
"babel-preset-react": "^7.0.0-beta.3",
"eslint": "^6.2.2",
"eslint-config-prettier": "^6.1.0",
"jest": "^24.9.0",
"jest-localstorage-mock": "^2.4.0",
"parcel-bundler": "^1.12.3",
"prettier": "^1.18.2"
},
"dependencies": {
"#emotion/babel-preset-css-prop": "^10.0.14",
"#emotion/core": "^10.0.16",
"#emotion/styled": "^10.0.15",
"#fortawesome/fontawesome-svg-core": "^1.2.0-7",
"#fortawesome/free-solid-svg-icons": "^5.11.1",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.19.0",
"bulma": "^0.7.5",
"eslint-plugin-jest": "^22.17.0",
"eslint-plugin-react": "^7.14.3",
"immer": "^4.0.0",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "16.x",
"react-detect-offline": "^2.4.0",
"react-dom": "^16.9.0",
"react-fontawesome": "^1.6.1",
"react-modal": "^3.10.1",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
}
}
Try instead per the documentation for SCSS and error Cannot find module 'sass' use module sass instead of node-sass:
npm install -D sass
The documentation mentions being able to use node-sass, but there are several active issues with node-sass. Module sass may help resolve the error and allow you use SCSS in your application.
Hopefully that helps!
I started angular Application via npm start with gulp/babel enabled.
After starting, the browser page keeps loading and is throwing an error "requiring external babel register".
given below logs from terminal:
[19:52:47] Requiring external module #babel/register
[19:52:53] Using gulpfile ~\WebstormProjects\agent-dealer-portal-frontend\portals-integration\front\gulpfile.babel.js
[19:52:53] Starting 'default'...
babel-register is listed properly in the terminal.
C:\Users\vramanathan\WebstormProjects\agent-dealer-portal-frontend\portals-integration\front>npm list babel-register
#globant/cna_national_portal#0.35.0 C:\Users\vramanathan\WebstormProjects\agent-dealer-portal-frontend\portals-integration\front
`-- babel-cli#6.26.0
+-- babel-core#6.26.3
| `-- babel-register#6.26.0 deduped
`-- babel-register#6.26.0
.babelrc file contents:
{
"presets": [
"es2015"
]
}
Package.json:
{
"main": "gulpfile.babel.js",
"name": "#globant/cna_national_portal",
"version": "00.35.00",
"babel": {
"presets": [
"#babel/env"
],
"compact": false
},
......
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/register": "^7.5.5",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"del": "^3.0.0",
"eslint": "^5.0.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^6.1.2",
"gulp-cli": "^1.4.0",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-eslint": "^4.0.2",
"gulp-header": "^1.8.9",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^2.4.0",
"gulp-load-plugins": "^1.4.0",
"gulp-ng-annotate": "^2.0.0",
"gulp-rev": "^8.1.1",
"gulp-rev-replace": "^0.4.4",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-sourcemaps": "^1.11.0",
"gulp-uglify": "^1.5.4",
"gulp-uncss": "^1.0.6",
},
"private": true,
"scripts": {
"start": "gulp",
"build": "gulp build --production",
"test": "gulp test",
"test:watch": "gulp test:watch",
"eslint": "gulp eslint"
}
}
The following may be useful: there is some incompatibilities between certain versions of Node / gulp when that arise when using different OSs (I'm on Chromebook for my work).
For me, downgrading to Node 10 solved my issue (via command): nvm use 10