npm install getting Cannot read property 'name' of null error

Viewed 2485

Not too sure what is causing this error as npm install works fine on other computers.

NPM and Node versions:

C:\Users\Work>npm -v
8.3.2

C:\Users\Work>node -v
v14.16.1

Here is my log file:

1045 timing metavuln:calculate:security-advisory:laravel-mix:BsF+UACSDcae51QqbAQxlxsAnxFUZFgrvDV6vu6cKmFKYbSYdVVZnALm0hmDv4dJ/hBksQh4SoHNXqfEVpN6eg== Completed in 4ms
1046 verbose stack TypeError: Cannot read property 'name' of null
1046 verbose stack     at npa (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-package-arg\npa.js:25:18)
1046 verbose stack     at FetcherBase.get (C:\Program Files\nodejs\node_modules\npm\node_modules\pacote\lib\fetcher.js:486:16)
1046 verbose stack     at Object.packument (C:\Program Files\nodejs\node_modules\npm\node_modules\pacote\lib\index.js:18:30)
1046 verbose stack     at Calculator.[packument] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\metavuln-calculator\lib\index.js:105:22)
1046 verbose stack     at Calculator.[calculate] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\metavuln-calculator\lib\index.js:56:23)
1046 verbose stack     at Calculator.calculate (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\metavuln-calculator\lib\index.js:43:31)
1046 verbose stack     at Map.[init] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\audit-report.js:173:36)
1046 verbose stack     at async Map.run (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\audit-report.js:108:7)
1047 verbose cwd D:\code\click-webplanner
1048 verbose Windows_NT 10.0.19042
1049 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
1050 verbose node v14.16.1
1051 verbose npm  v7.20.3
1052 error Cannot read property 'name' of null
1053 verbose exit 1

And this is my composer file:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.4.0",
    "cross-env": "^5.0.1",
    "deepmerge": "^4.2.2",
    "fibers": "^5.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "lodash": "^4.17.4",
    "sass": "^1.26.8",
    "sass-loader": "^8.0.2",
    "save": "^2.3.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue": "^2.6.3",
    "vue-template-compiler": "^2.6.3",
    "webpack": "^4.43.0"
  },
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.4.4",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "ajv": "^6.8.1",
    "autoprefixer": "^9.8.6",
    "axios-cancel": "^0.2.2",
    "date-fns": "^2.0.0-alpha.27",
    "dayjs": "^1.8.28",
    "flatpickr": "^4.5.2",
    "highlight.js": "^10.1.2",
    "laravel-echo": "^1.5.3",
    "laravel-mix": "^5.0.4",
    "marked": "latest",
    "moment": "^2.29.1",
    "npm": "^6.9.0",
    "postcss": "^7.0.35",
    "prismjs": "^1.23.0",
    "prosemirror-utils": "^0.6.7",
    "pusher-js": "^4.4.0",
    "sweetalert": "^2.1.0",
    "sweetalert2": "^7.33.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "tiptap": "^0.19.0",
    "tiptap-extensions": "^0.21.0",
    "vue-bulma-datepicker": "^1.3.6",
    "vue-fuse": "^3.0.0",
    "vue-select": "^3.1.0",
    "vue-select2": "^0.2.6",
    "vue-sidebar-menu": "^3.7.0",
    "vue2-editor": "^2.6.6",
    "vuedraggable": "^2.17.0",
    "vuetify": "^2.2.33",
    "vuetify-loader": "^1.4.4"
  }
}
1 Answers

This error is occurring with the npm version that you are using: v8.3.2 and the way that you passing the version of the module "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"

If you remove this library will see that the error will stop to happen.

To solve this you can change the tailwindcss version to ^2.0.1-compat:

"tailwindcss": "^2.0.1-compat"

Or upgrade or downgrade your npm version:

Try to downgrade your node.js and npm version for other lts version like the lts/fermium (node v14.19.0, npm v6.14.16) or upgrade to the stable version (node v17.5.0, npm v8.4.1)

Also, the recommended version for the npm with the node version v14.16.1 is the is 6.14.12 and not 8.3.2 as we can see in the releases table.

When you change the npm version you will need:

  1. Delete the node_modules directory and package-lock.json file.
  2. Reinstall the modules using npm install
Related