npm install how to prevent nested node_mocules folders - node.js

I have a package.json file that has
"dependencies": {
"packageA": "^1.0.0",
and this package A has another dependency in his package.json
"dependencies": {
"packageA_B": "^1.0.0",
Then, if I run npm install on windows 10, node v11.11.0 I end up having
/node_modules/packageA
/node_modules/packageA/node_modules/packageA_B
Then, if I delete this package and run npm install packageA I end up having
/node_modules/packageA
/node_modules/packageA_B
Which is what I want from the beginning. Why is this inconsistency happening? How to force to install all packages in a non-nested way?
package.json
{
"name": "first_package",
"private": true,
"description": "",
"main": "gatsby-config.js",
"version": "0.2.25",
"author": "",
"dependencies": {
"packageA": "git+https://blah.git#h5c8f72",
"gatsby": "2.1.4",
"gatsby-plugin-compile-es6-packages": "^1.0.6",
"gatsby-plugin-offline": "^2.0.24",
"gatsby-plugin-page-creator": "^2.0.10",
"gatsby-plugin-react-helmet": "^3.0.8",
"gatsby-plugin-sharp": "^2.0.25",
"gatsby-plugin-styled-components": "^3.0.6",
"gatsby-source-filesystem": "^2.0.23",
"gatsby-transformer-sharp": "^2.1.15",
"path": "0.12.7",
"react": "16.8.6",
"react-dom": "16.8.6",
"styled-components": "^4.1.3",
"styled-icons": "^7.4.2"
},
"devDependencies": {
"babel-eslint": "^10.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-standard": "^4.0.0",
"gulp": "^4.0.0",
"gulp-help": "^1.6.1",
"prettier": "^1.16.4"
},
"keywords": [
""
],
"license": "",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"repository": {
"type": "git",
"url": "https://"
},
"bugs": {
"url": "https://"
}
}
Package A package.json
{
"name": "packageA",
"private": true,
"description": "",
"version": "0.2.25",
"main": "index.js",
"author": "",
"dependencies": {
"packageA_B": "0.2.25",
"styled-components": "4.2.0",
"styled-icons": "7.9.0",
"babel-plugin-styled-components": "1.10.0",
"gatsby-plugin-styled-components": "3.0.7",
"gatsby-plugin-page-creator": "2.0.12",
"gatsby-source-filesystem": "2.0.28",
"gatsby-plugin-compile-es6-packages": "1.1.0",
"path": "0.12.7",
"esm": "3.2.14",
"prop-types": "15.7.2",
"gatsby-plugin-gtag": "1.0.10",
"gatsby-plugin-manifest": "2.0.26",
"react-cookie-consent": "2.2.2"
},
"peerDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6"
},
"devDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6",
"babel-eslint": "^10.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-standard": "^4.0.0",
"gulp": "^4.0.0",
"gulp-help": "^1.6.1",
"prettier": "^1.16.4"
},
"keywords": [
""
],
"license": "",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"repository": {
"type": "git",
"url": ""
},
"bugs": {
"url": ""
}
}
Package A_B package.json
{
"name": "packageA_B",
"version": "0.2.25",
"description": "",
"author": "",
"main": "index.js",
"license": "",
"private": false,
"dependencies": {
"styled-components": "4.2.0",
"styled-icons": "7.9.0",
"babel-plugin-styled-components": "1.10.0",
"gatsby-plugin-styled-components": "3.0.7",
"gatsby-plugin-page-creator": "2.0.12",
"gatsby-source-filesystem": "2.0.28",
"gatsby-plugin-compile-es6-packages": "1.1.0",
"path": "0.12.7",
"esm": "3.2.14",
"prop-types": "15.7.2",
"gatsby-mdx": "0.4.2",
"#mdx-js/mdx": "0.20.3",
"#mdx-js/tag": "0.20.3",
"gatsby-image": "2.0.31",
"gatsby-plugin-offline": "2.0.25",
"gatsby-plugin-react-helmet": "3.0.11",
"gatsby-plugin-sharp": "2.0.32",
"gatsby-transformer-sharp": "2.1.17",
"react-helmet": "5.2.0",
"react-share": "2.4.0"
},
"peerDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6"
},
"devDependencies": {
"gatsby": "2.1.4",
"react": "16.8.6",
"react-dom": "16.8.6",
"babel-eslint": "^10.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-standard": "^4.0.0",
"gulp": "^4.0.0",
"gulp-help": "^1.6.1",
"prettier": "^1.16.4"
},
"keywords": [
""
],
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "echo \"Write tests! -> https://gatsby.app/unit-testing\""
},
"repository": {
"type": "git",
"url": ""
},
"bugs": {
"url": ""
}
}

Solved by specifying not an exact version "1.0.0" but a compatible version "^1.0.0". Somehow with the exact version npm doesn't share the package even though they are the exact same version. Also, running npm dedupe doesn't make anything when an exact version is specified.

Related

502 Bad Gateway (nginx/1.14.0 (Ubuntu))

Hi i have a server with multiple subdomain a weird issue started when all domains returned with 502 bad gateway i entered one subdomain and i run npm run dev and it worked but all the remain subdomains still 502, when i go to other subdomain and run npm start the subdomain work while all the other return 502 what should i do.
here's my package for web (on a subdomain)
{
"name": "mmy-route-web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"#glidejs/glide": "^3.4.0",
"#mailchimp/mailchimp_marketing": "^3.0.43",
"#popperjs/core": "^2.9.2",
"#stripe/stripe-js": "^1.13.2",
"bootstrap": "^5.0.0-beta3",
"cloudinary-build-url": "^0.2.1",
"cloudinary-react": "^1.7.0",
"cookie": "^0.4.1",
"html-react-parser": "^1.2.6",
"lodash": "^4.17.21",
"next": "10.0.9",
"next-iron-session": "^4.1.12",
"nookies": "^2.5.2",
"npm": "^8.1.0",
"parse": "^3.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-use-tawk": "^1.0.0",
"sass": "^1.32.8",
"stripe": "^8.145.0",
"styled-components": "^5.2.1",
"swr": "^0.5.5"
},
"browser": {
"child_process": false
}
}
and for my backend (on other subdomain):
{
"name": "parse-server-example",
"version": "1.4.0",
"description": "An example Parse API server using the parse-server module",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/"
},
"license": "MIT",
"dependencies": {
"#parse/fs-files-adapter": "^1.2.0",
"concurrently": "^7.0.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jimp": "^0.16.1",
"kerberos": "0.0.24",
"nodemailer": "^6.4.17",
"parse": "~1.8.0",
"parse-dashboard": "^2.1.0",
"parse-server": "*",
"parse-server-cloudinary-adapter": "^1.4.0",
"parse-server-dedicated-email-adapter": "^3.0.6",
"parse-server-email-template-adapter": "^1.0.2",
"parse-server-generic-email-adapter": "0.0.4",
"parse-smtp-template": "^2.2.0",
"slugify": "^1.4.6"
},
"scripts": {
"start": "node index.js",
"dev": "concurrently \"cd server && npm run start\" \"npm run start\""
},
"engines": {
"node": ">=4.3"
}
}

How do I resolve this dependency conflict from when doing npm link

When I do npm link like this in Window 10:
L:\git\notistack> npm link L:\react\Greta100Weeks\greta100weeks\node_modules\react
In my app when I do import { useSnackbar } from 'notistack'; then I can use the notistack ok, and it's the global notistack. I want to modify it debug it locally so I forked it and did the npm link but when I npm start the the App get the "You might have more than one copy of React in the same app " error. I also test this and it's true so that's why I do the npm link react and it's also recommended so I don't know what I do wrong here
To be able to debug notistack in VSCode and use the notistack in my app in VSCode. I do npm link. I get the Duplicate React error so must npm link the App react version and tell notistack to us the app react.
But I get this error: I do this npm link on other library's without problem but now this error:
I have tried to fixed this but it's not working.
I also do:
L:\git\notistack> npm link L:\react\Greta100Weeks\greta100weeks\node_modules\react-dom
And that is resolving ok.
I fork the notistack library and is using it ok in the app but only when I do npm link it fails. What is the problem here I guess it's in the package.json
Here is the package.json for the forked library notistack:
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "dist/index.js",
"module": "dist/notistack.esm.js",
"types": "dist/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.11.2",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}
Here is the package.json for the app using the library:
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"normalize-wheel": "^1.0.1",
"notistack": "^1.0.10",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.5",
"react-resize-detector": "^5.0.7",
"react-router": "^6.0.0-beta.4",
"react-router-dom": "^6.0.0-beta.4",
"react-scripts": "^3.4.0",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-visibility-sensor": "^5.1.1",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.41.1",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^3.9.7",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "^3.4.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}

What's wrong here I have to do NPM link on "react": "^16.13.1" because app report duplicate React

It started with this error:
So I did a test to rule out what the problem was. I tested if the library Notistack that I hade forked from GitHub, and then linked with npm link to my app, was the problem.
I placed this code in the app
window.React2 = require('react');
console.log(window.React1 === window.React2);
And I placed this code in forked Notistack
window.React1 = require('react');
When I run the app I can see in the console that I get a false from that test. Indication that I have two different React version and that causing the error.
If I now do npm link in the library for the React package, so that the Notistack is using the app's version of React. Then I get rid of this error.
What am I missing here why do I have to do this even I use peerDependencies for React.
"peerDependencies": {
"#material-ui/core": "^4.0.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"react-redux": "^7.2.5"
},
package.json
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "dist/index.js",
"module": "dist/notistack.esm.js",
"types": "dist/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.0.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"react-redux": "^7.2.5"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}

Define no proxy but get 'When "proxy" is specified in package.json' error

When I run npm run dev I get an error message:
When "proxy" is specified in package.json it must start with either http:// or https:// , but I don't define any proxy in my package.json. How can this happen and how do I solve it?
package.json
{
"name": "vue-admin-template",
"version": "4.3.0",
"description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
"author": "Pan <panfree23#gmail.com>",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"dependencies": {
"#gitgraph/js": "^1.3.5",
"#toast-ui/vue-editor": "^2.5.1",
"axios": "0.18.1",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"echarts": "^4.8.0",
"element-ui": "2.13.2",
"element-ui-el-table-draggable": "^1.2.9",
"fuse.js": "^6.4.3",
"jquery": "^3.5.1",
"js-cookie": "2.2.0",
"jwt-simple": "^0.5.6",
"moment": "^2.27.0",
"monaco-editor": "^0.20.0",
"monaco-editor-webpack-plugin": "^1.9.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"socket.io-client": "^4.0.0",
"tui-editor": "1.3.3",
"vue": "2.6.10",
"vue-chartjs": "^3.5.1",
"vue-i18n": "^8.22.1",
"vue-jwt-decode": "^0.1.0",
"vue-router": "3.0.6",
"vue-showdown": "^2.4.1",
"vuedraggable": "2.20.0",
"vuex": "3.1.0",
"wangeditor": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "3.6.0",
"#vue/cli-plugin-eslint": "^3.9.1",
"#vue/cli-plugin-unit-jest": "3.6.3",
"#vue/cli-service": "3.6.0",
"#vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "^9.5.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"chalk": "2.4.2",
"connect": "3.6.6",
"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"html-webpack-plugin": "3.2.0",
"mockjs": "1.0.1-beta3",
"runjs": "^4.3.2",
"sass": "^1.26.8",
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "^1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-template-compiler": "2.6.10"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
It was in vue.config.js. Setting wrong proxy here will occur the same error message.

SyntaxError: Cannot use import statement outside a module using jest

I'm trying to start tests using Jest, but I'm not able to use "import", so how can I use import in Jest?
plus.js
function addTwo(num) {
return num + 2;
}
export { addTwo };
test.js
import { addTwo } from './plus';
test('adds 1 + 2 to equal 3', () => {
expect(addTwo(4)).toBe(6);
});
Error:
My package.json:
{
"name": "...",
"version": "1.0.0",
"title": "...",
"homepage": "http://...",
"devDependencies": {
"#babel/core": "7.12.3",
"babel-loader": "8.1.0",
"btoa": "1.2.1",
"chalk": "3.0.0",
"circular-dependency-plugin": "5.2.0",
"css-loader": "5.0.0",
"dp-grunt-contrib-copy": "0.4.4",
"eslint": "5.16.0",
"eslint-loader": "4.0.2",
"file-loader": "6.2.0",
"filemanager-plugin": "2.5.2",
"generate-json-webpack-plugin": "2.0.0",
"grunt": "1.1.0",
"grunt-contrib-clean": "0.7.0",
"grunt-contrib-compress": "1.6.0",
"grunt-contrib-concat": "1.0.1",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-cssmin": "1.0.2",
"grunt-cssjoin": "0.3.0",
"grunt-eslint": "21.1.0",
"grunt-exec": "3.0.0",
"grunt-jsmin-sourcemap": "1.10.0",
"grunt-terser": "0.1.0",
"grunt-writefile": "0.1.4",
"html-loader": "1.3.2",
"jest": "^26.6.3",
"jwt-decode": "3.0.0",
"mini-css-extract-plugin": "1.2.1",
"npm-run-all": "4.1.5",
"prettier": "2.1.2",
"prettier-webpack-plugin": "1.2.0",
"resize-observer-polyfill": "1.5.1",
"sass": "1.25.0",
"sass-loader": "10.0.4",
"sha1": "1.1.1",
"ssh2": "0.8.9",
"style-loader": "2.0.0",
"vue-virtual-scroller": "1.0.10",
"webpack": "5.3.1",
"webpack-cli": "3.3.12",
"xmlhttprequest": "1.8.0"
},
"dependencies": {
"inputmask": "5.0.0",
"jquery": "2.1.3",
"requirejs": "2.3.6",
"vue": "2.6.10",
"vue-i18n": "8.15.3",
"vuedraggable": "2.23.2"
},
"scripts": {
"build": "npm run dev && bash ./build.sh",
"lint": "npx eslint --fix --quiet .",
"prettier": "npx prettier --config ./.prettierrc.json --write ./**/*.{scss,js}",
"prod": "node node/compiler.js prod",
"dev": "node node/compiler.js dev",
"backup-log": "node node/logger.js",
"test": "jest"
}
}
The solution was install #babel/preset-env:
npm install --save-dev #babel/preset-env
Create a file babel.config.js
module.exports = {
presets: [['#babel/preset-env', {targets: {node: 'current'}}]],
};

Resources