I have been trying to run a project in debug mode for quite a long time and I get an import error, I have already studied a lot of information on this issue and decided to move along the path of setting up babel. The fact is that this project is working and everything started fine, but now I upgraded the version of node 10> 12, next 8> 9, went through all typescript errors, was able to build the build and tried to run it locally, but got an import error
Project: next v9, node v12
// package.json (shortcut):
{
"name": "mysite",
"version": "1.0.0",
"main": "index.js",
"description": "some",
"private": true,
"scripts": {
"dev": "nodemon server/server.ts"
},
"dependencies": {
...
"express": "^4.16.3",
"node-sass": "^4.9.3",
"next": "9.2.2",
"react": "^16.8.4",
...
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.1.0",
"#types/body-parser": "^1.17.0",
"#types/connect-mongo": "^0.0.38",
"#types/cookie-parser": "^1.4.1",
"#types/debug": "^4.1.0",
"#types/express": "^4.16.0",
"#types/express-session": "^1.15.10",
"#types/mongodb": "^3.1.4",
"#types/mongoose": "^5.2.6",
"#types/multer": "^1.3.7",
"#types/node": "^10.7.1",
"#types/passport": "^0.4.6",
"#types/passport-local": "^1.0.33",
"#types/react": "^16.4.11",
"#types/react-dom": "^16.0.7",
"#types/redux-form": "^7.4.7",
"#types/set-value": "^2.0.0",
"#types/shortid": "^0.0.29",
"autoprefixer": "^9.4.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-node": "^0.0.1-security",
"babel-plugin-import": "^1.13.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-wrap-in-js": "^1.1.1",
"babel-preset-env": "^1.7.0",
"css-purify-webpack-loader": "^1.0.1",
"eslint": "^5.4.0",
"eslint-plugin-react": "^7.11.1",
"faker": "^4.1.0",
"next-purgecss": "^3.0.1",
"next-size": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"purgecss-whitelister": "^2.3.1",
"stylelint-config-recommended": "^2.1.0",
"tailwindcss": "^0.7.4",
"ts-node": "^7.0.1",
"typescript": "^3.0.1",
"webpack-pwa-manifest": "^4.0.0"
}
}
// server.ts:
import bodyParser from 'body-parser';
... // other lib imports, config imports, middlevare, routes
import middlewareOAuth from './middlewareOAuth';
...
import authRoute from './routes/auth';
...
const app = next({ dev: config.dev });
app.prepare()
.then(() => {
const server = express();
...
server.use() // connecting middleware, passports, routes and others
// babel.rc
{
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"app": "./app",
"pages": "./pages",
"server": "./server",
"styles": "./styles",
"wavesurfer.js": "./wavesurfer.js"
},
"extensions": [ ".wasm", ".mjs", ".js", ".jsx", ".json", ".ts", ".tsx" ],
"cwd": "babelrc"
}
],
["#babel/plugin-proposal-decorators", { "legacy": true }],
"transform-class-properties",
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
],
"presets": [
["next/babel",
{
"preset-env": { "targets": { "node": "current" } }
}
]
],
"ignore": []
}
When I use yarn dev command in console:
$ nodemon server/server.ts
[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server/**/*.ts
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node --compiler-options '{"module":"commonjs"}' server/server.ts`
[nodemon] app crashed - waiting for file changes before starting...
When I want to see what kind of error occurred I use the command: ts-node server/server.ts and get an error =>
/home/roma/project/mysite/server/server.ts:1
import bodyParser from 'body-parser';
^^^^^^
SyntaxError: Cannot use import statement outside a module
What am I missing or not doing? Thanks!
Adding "type": "module" to package.json will tell Node you are using ES2015 modules, which should get rid of the error, but then you will need to tell Typescript to generate this type of module by setting "module": "es2015" instead of "commonjs" in tsconfig.json.
answered in: https://stackoverflow.com/a/60225870/16471349
Related
How do you get round this error in webpack?
Answers in similar threads are poorly explained.
I get this error when trying to run the code and have no idea how to solve it - what steps to take, where to look for error etc.
babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
webpack.config.js
const path = require('path');
module.exports = {
target: 'node',
output: {
path: path.join(__dirname, './.webpack'),
filename: 'handler.js',
libraryTarget: 'commonjs',
}
};
package.json
{
"name": "rate-repository-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node -r esm ./src/index.js",
"start:dev": "nodemon -r esm ./src/index.js",
"bundle": "cpx src/**/* functions/bundle",
"start:lambda": "netlify-lambda serve ./src/lambda",
"lint": "eslint ./src",
"test": "jest .",
"migrate:make": "knex migrate:make",
"migrate:latest": "knex migrate:latest",
"build": "npm run migrate:latest",
"seed:make": "knex seed:make",
"seed:run": "knex seed:run"
},
"lint-staged": {
"src/**/*.js": "eslint",
"*.{js,json,css,md}": "prettier --write"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/Kaltsoon/rate-repository-api.git"
},
"author": "Kalle Ilves",
"license": "MIT",
"bugs": {
"url": "https://github.com/Kaltsoon/rate-repository-api/issues"
},
"homepage": "https://github.com/Kaltsoon/rate-repository-api#readme",
"dependencies": {
"#apollo/server": "^4.3.0",
"#as-integrations/aws-lambda": "^1.1.0",
"#koa/cors": "^3.0.0",
"apollo-boost": "^0.4.9",
"apollo-server": "^3.3.0",
"apollo-server-core": "^3.3.0",
"apollo-server-koa": "^3.3.0",
"apollo-server-lambda": "^3.11.1",
"axios": "^0.24.0",
"bcrypt": "^5.0.0",
"dataloader": "^2.0.0",
"date-fns": "^2.9.0",
"dotenv": "^11.0.0",
"es6-error": "^4.1.1",
"esm": "^3.2.25",
"graceful-fs": "^4.2.10",
"graphql": "^16.6.0",
"jsonwebtoken": "^8.5.1",
"knex": "^0.95.15",
"koa": "^2.11.0",
"koa-bodyparser": "^4.3.0",
"koa-morgan": "^1.0.1",
"koa-router": "^10.0.0",
"lodash": "^4.17.15",
"lru-cache": "^6.0.0",
"netlify-lambda": "^2.0.15",
"objection": "^3.0.1",
"serverless-plugin-common-excludes": "^4.0.0",
"serverless-plugin-include-dependencies": "^5.0.0",
"sqlite3": "^5.0.2",
"through2": "^4.0.2",
"uuid": "^8.3.2",
"watchman": "^1.0.0",
"winston": "^3.8.2",
"yup": "^0.32.8"
},
"devDependencies": {
"#babel/core": "^7.16.7",
"#babel/eslint-parser": "^7.16.5",
"#babel/preset-env": "^7.8.4",
"cpx": "^1.5.0",
"eslint": "^8.6.0",
"eslint-plugin-jest": "^25.3.4",
"husky": "^4.2.3",
"jest": "^27.4.7",
"lint-staged": "^10.0.7",
"nodemon": "^2.0.7",
"prettier": "^2.2.1",
"serverless-plugin-typescript": "^2.1.4",
"serverless-webpack": "^5.11.0"
},
"type": "commonjs"
}
index.js
import http from 'http';
var fs = require('graceful-fs')
import logger from './utils/logger';
import { API_PORT, APOLLO_PORT } from './config';
import createApolloServer from './apolloServer';
import app from './app';
var gracefulFs = require('graceful-fs')
gracefulFs.gracefulify(fs)
const startServer = async () => {
const httpServer = http.createServer(app);
const apolloServer = createApolloServer();
await apolloServer.listen({ port: APOLLO_PORT });
httpServer.on('request', app.callback());
await new Promise((resolve) =>
httpServer.listen({ port: API_PORT }, resolve),
);
logger.info(`Apollo Server ready at http://localhost:${APOLLO_PORT}`);
};
startServer();
I struggle for a good 4-5 hours to make SCSS work with Vite + Storybook setup and I need your help.
I'm getting the following error message when I try to start Storybook:
ERROR in ./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Storybook main.js
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
}
}
I'm importing the SCSS in the Storybook preview.js
The SCSS works fine in Vite but not loading in Storybook.
...
import '../src/styles/main.scss'
...
And finally the package.json
{
"name": "X",
"version": "0.0.0",
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"css-loader": "^3.6.0",
"history": "^4.10.1",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"sass-loader": "^12.1.0",
"style-loader": "^1.3.0",
"styled-components": "^5.3.1"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#storybook/addon-actions": "^6.3.7",
"#storybook/addon-docs": "^6.3.7",
"#storybook/addon-essentials": "^6.3.7",
"#storybook/addon-links": "^6.3.7",
"#storybook/react": "^6.3.7",
"#vitejs/plugin-react-refresh": "^1.3.1",
"babel-loader": "^8.2.2",
"sass": "^1.35.2",
"vite": "^2.4.3"
}
}
Would appreciate your help with this. Thanks!
install #storybook/scss-loader
https://www.npmjs.com/package/#storybook/preset-scss
yarn add -D #storybook/preset-scss
downgrade dependencies.
if you have these installed remove them
yarn remove sass-loader style-loader css-loader
install these versions
yarn add -D sass-loader#10.1.1 style-loader#2.0.0 css-loader#5.2.6
If your files look like this, storybook should compile successfully.
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/preset-scss',
],
};
package.json
...
"devDependencies": {
"#storybook/addon-actions": "^6.3.6",
"#storybook/addon-essentials": "^6.3.6",
"#storybook/addon-links": "^6.3.6",
"#storybook/html": "^6.3.6",
"#storybook/preset-scss": "^1.0.3",
"css-loader": "5.2.6",
"sass-loader": "10",
"style-loader": "2.0.0",
},
...
https://github.com/storybookjs/presets/issues/195#issuecomment-887733786
I am trying to use Server-side-rendering in create-react-application but i have been getting the following error.
I have tried to update the babel version and change the type : 'commonjs' in package.json but is of no use.
This is the link i have been refering to implement ssr in my project link A hands-on guide for a Server-Side Rendering React app
Must use import to load ES Module:/Users/*path/node_modules/#babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
require() of ES modules is not supported.
require() of /Users/*path/node_modules/#babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js from /Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/node_modules/react-spring/renderprops.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename objectWithoutPropertiesLoose.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/*path/node_modules/#babel/runtime/helpers/esm/package.json.
My server.js file is as follows
require("#babel/register")({
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
"#babel/plugin-proposal-class-properties",
[
"transform-assets",
{
extensions: ["css", "svg", "png"],
name: "static/media/[name].[hash:8].[ext]",
},
],
],
});
const React = require("react");
const ReactDOMServer = require("react-dom/server");
const App = require("../src/App").default;
const express = require("express");
const path = require("path");
const fs = require("fs");
const app = express();
app.get("/*", (req, res, next) => {
console.log(`Request URL = ${req.url}`);
if (req.url !== "/") {
return next();
}
const reactApp = ReactDOMServer.renderToString(React.createElement(App));
console.log(reactApp);
const indexFile = path.resolve("build/index.html");
fs.readFile(indexFile, "utf8", (err, data) => {
if (err) {
const errMsg = `There is an error: ${err}`;
console.error(errMsg);
return res.status(500).send(errMsg);
}
return res.send(
data.replace('<div id="root"></div>', `<div id="root">${reactApp}</div>`)
);
});
});
app.use(express.static(path.resolve(__dirname, "../build")));
app.listen(8080, () =>
console.log("Express server is running on localhost:8080")
);
My Package.json file is as follows:
{
"name": "",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.0",
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/babel-types": "^7.0.9",
"axios": "^0.19.2",
"babel-plugin-transform-assets": "^1.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^4.4.1",
"concurrently": "^5.2.0",
"express": "^4.17.1",
"fontawesome": "^5.6.3",
"jquery": "^3.5.0",
"nodemon": "^2.0.6",
"package.json": "^2.0.1",
"popper": "^1.0.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-google-recaptcha": "^2.0.1",
"react-google-recaptcha-v3": "^1.5.1",
"react-helmet": "^6.0.0",
"react-owl-carousel": "^2.3.1",
"react-recaptcha-v3": "^1.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-router-sitemap": "^1.2.0",
"react-scripts": "^3.4.3",
"react-spring": "^8.0.27",
"react-visibility-sensor": "^5.1.1",
"reactstrap": "^8.4.1",
"styled-components": "^5.1.0",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sitemap": "babel-node ./src/Sitemap_files/sitemap.js",
"predeploy": "npm run sitemap",
"nodemon": "nodemon ./server/index.cjs"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/node": "^7.10.5",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/preset-env": "^7.12.10",
"#babel/preset-react": "^7.12.10",
"#babel/register": "^7.12.10",
"babel-cli": "^6.26.0",
"babel-plugin-transform-assets": "^1.0.2",
"generate-robotstxt": "^8.0.3"
}
}
I get a different error if i try to serve the server.js without nodemon i.e:
/Users/*path/src/App.js:1
import React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1054:16)
at Module._compile (internal/modules/cjs/loader.js:1102:27)
at Module._compile (/Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Object.newLoader [as .js] (/Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/Users/Rajat/Desktop/ebullientech_ssr_example/ebullientech_io_reactjs/server/index.cjs:16:13)
Any Help would be appreciated..Thankyou!
Try adding "type": "module" to your package.json.
Solved it. Please do add the following plugin "#babel/plugin-proposal-class-properties" using npm or yarn and refer to it in the babel/register configuration settings. Like so:
require('#babel/register')({
ignore: [/(node_module)/],
presets: ['#babel/preset-env', '#babel/preset-react'],
"plugins": [
"#babel/plugin-proposal-class-properties",
{
"transform-assets",
{
"extensions": [
"css",
"svg"
],
"name": "static/media/[name].[hash:8].[ext]"
}
}
]
})
When I install project dependency from local directory
npm install ../myDep
and next run npm run serve everything is ok.
But when I install this dependency directly from repo
(npm install git+ssh://(...)/myDep.git) (it should be done in this way)
and run npm run serve I have an error:
Module parse failed: Unexpected token (14:9)
You may need an appropriate loader to handle this file type.
| }
|
> device = {
|
| info: () => {
Here is part of file with this error:
export class MyDependencyClass {
constructor(args) {
(...)
}
device = {
info: () => {
return {};
},
(...)
}
(...)
}
This unexpected token is = and only when I install it from repo.
How can I fix it?
#edit
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "./deploy.sh",
},
"dependencies": {
"core-js": "^3.3.2",
"myDep": "git+ssh://git#gitlab.com:pplaczek/myDep.git",
"markdown-it-vue": "^1.0.10",
"roboto-fontface": "*",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vue-the-mask": "^0.11.1",
"vuetify": "^2.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#mdi/font": "^3.9.97",
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0"
}
}
vue.config.js
module.exports = {
transpileDependencies: ["vuetify"]
};
babel.config.js
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"]
};
There is no guarantee this will help, but you can try with the following Babel configuration:
module.exports = {
presets: [
[
'#vue/app',
{
exclude:
[
"#babel/plugin-transform-typeof-symbol",
'#babel/plugin-transform-regenerator',
],
modules: false
}
]
],
plugins:
[
"#babel/plugin-proposal-class-properties", // this seems to be the important one
]
}
Banging my head against the wall for the past few hours trying to figure out what happened to my webpack.config. I even tried to revert to an older commit and still saw the same problems. Any ideas or suggestions would be much appreciated. Thanks! Posting my webpack.config and package.json below
webpack.config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [ '#babel/polyfill', './app/index.js',],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader'},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
],
mode: process.env.NODE_ENV === 'production' ? 'production': 'development'
};
----------
## package.json
{
"name": "my-reps",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"build": "NODE_ENV='production' webpack",
"firebase-init": "firebase login && firebase init",
"deploy": "npm run build && firebase deploy"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.0.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"classnames": "^2.2.6",
"firebase-tools": "^4.2.1",
"jquery": "^3.3.1",
"lodash.debounce": "^4.0.8",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-places-autocomplete": "^7.2.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-twitter-embed": "^1.1.3",
"react-twitter-widgets": "^1.7.1",
"reactstrap": "^6.5.0"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-transform-react-constant-elements": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.0",
"babel-register": "^6.26.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.22.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
error message:
ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
# ./node_modules/lodash/lodash.js 1:0-41
# ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html
ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
# ./node_modules/lodash/lodash.js 1:0-41
# ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html
ℹ 「wdm」: Failed to compile.
Did you happened to update npm packages recently? Particularly the following packages in devDependencies:
webpack
webpack-cli
babel
babel-loader
Certain version of these packages may cause problems when building.
If so, you can try reinstalling devDependencies to the versions you used to use.
Another way is to use the latest version instead. Sometimes npm update command will not install the latest version for some reason. So you need to go to npm website and check the latest version of each devDependencies.