Cannot install carbon-vue on fresh Vue 3 project

[TNSaturday]

[Title]: Cannot install carbon-vue on fresh Vue 3 project

Detailed description

Describe in detail the issue you're having.

I'm trying to install @carbon/vue 3 on a new Vue 3 project generated using Vite Vue 3 template.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug.

Is this issue related to a specific component?

No.

What did you expect to happen? What happened instead? What would you like to see changed?

I expect npm add command to run succesfully. Instead got this error message:

npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     'C:\\dev\\vue-carbon-emit\\node_modules\\carbon-components',
npm WARN cleanup     [Error: EBUSY: resource busy or locked, rmdir 'C:\dev\vue-carbon-emit\node_modules\carbon-components'] {
npm WARN cleanup       errno: -4082,
npm WARN cleanup       code: 'EBUSY',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\dev\\vue-carbon-emit\\node_modules\\carbon-components'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\dev\\vue-carbon-emit\\node_modules\\@vueuse\\core',
npm WARN cleanup     [Error: EBUSY: resource busy or locked, rmdir 'C:\dev\vue-carbon-emit\node_modules\@vueuse\core\node_modules\vue-demi'] {
npm WARN cleanup       errno: -4082,
npm WARN cleanup       code: 'EBUSY',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\dev\\vue-carbon-emit\\node_modules\\@vueuse\\core\\node_modules\\vue-demi'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\\dev\\vue-carbon-emit\\node_modules\\@vueuse\\shared',
npm WARN cleanup     [Error: EBUSY: resource busy or locked, rmdir 'C:\dev\vue-carbon-emit\node_modules\@vueuse\shared\node_modules\vue-demi'] {
npm WARN cleanup       errno: -4082,
npm WARN cleanup       code: 'EBUSY',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\\dev\\vue-carbon-emit\\node_modules\\@vueuse\\shared\\node_modules\\vue-demi'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]
npm ERR! code 1
npm ERR! path C:\dev\vue-carbon-emit\node_modules\@carbon\vue
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node prepare.js && node .storybook/postinstall.js
npm ERR! node:internal/modules/cjs/loader:1051
npm ERR!   throw err;
npm ERR!   ^
npm ERR!
npm ERR! Error: Cannot find module 'C:\dev\vue-carbon-emit\node_modules\@carbon\vue\prepare.js'
npm ERR!     at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
npm ERR!     at Module._load (node:internal/modules/cjs/loader:901:27)
npm ERR!     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
npm ERR!     at node:internal/main/run_main_module:23:47 {
npm ERR!   code: 'MODULE_NOT_FOUND',
npm ERR!   requireStack: []
npm ERR! }
npm ERR!
npm ERR! Node.js v20.6.1

What browser are you working in?

Not browser related.

What version of the Carbon Design System are you using?

3.0.13

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Just trying carbon out.

Steps to reproduce the issue

1. Environment specs: Windows 10, Node.js v20.6.1, NPM v10.4.0
2. Set up new Vue project: npm create vite@latest app-name -- --template vue
3. cd into directory and run npm install
4. Ensure that Vue app itself is running.
5. Run npm add @carbon/vue
6. Get an error.

Additional information

[benceszenassy]

Hy,

I tried the steps to mimic what you have done, but it worked for me. (Windows 11, Node 20.10.0, NPM 10.2.3) Based on the error messages (Error: EBUSY: resource busy or locked), for me it seems like a windows issue, try installing the package after a windows restart.

[davidnixon]

^^ Ditto. osx is good for me:

/tmp/app-name$ npm add @carbon/vue

added 26 packages, and audited 55 packages in 46s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

[mbwhite]

@davidnixon I've also seen this issue today; Ubuntu running WSL2 Also on the demo projhect hello-carbon-vue3

I'm using Node v20. as well.... not yet debugged into this - contact me via [email protected] if I can help

[morpheux]

same here osx v20.12.0 arm64 3.0.14 is fine if i update to 3.0.15 it breaks

[mbwhite]

FYI _ I've found that yarn does do the installation... worth a try.

[Ecpii]

Windows 11 23H2 Node 22.1.0, npm 10.7.0 - same issues here. Specifically targeting 3.0.14 or older versions seems to give the same errors, as well as WSL.

[mbwhite]

Windows 11 23H2 Node 22.1.0, npm 10.7.0 - same issues here. Specifically targeting 3.0.14 or older versions seems to give the same errors, as well as WSL.

I'm using WSL2 as well. Had to use Yarn to get it to work

[davidnixon]

From above output I can see it is trying to run the "_postinstall" script in the package which is

node prepare.js && node .storybook/postinstall.js && ibmtelemetry --config=telemetry.yml

but why? During the packaging tha script specifically gets renamed to from postinstall to _postinstall so that it will not run. Why is npm running it like its a lifecycle script?

this works

1. nvm use 18 - Now using node v18.18.2 (npm v9.8.1)
2. Set up new Vue project: npm create vite@latest app-name -- --template vue
3. cd into directory and run npm install
4. Ensure that Vue app itself is running.
5. Run npm add @carbon/vue

this fails

1. nvm use 20 - Now using node v20.13.1 (npm v10.5.2)
2. Set up new Vue project: npm create vite@latest app-name -- --template vue
3. cd into directory and run npm install
4. Ensure that Vue app itself is running.
5. Run npm add @carbon/vue

So I think it is some new behaviour with npm 10?

We do have a change in-flight in PR #1593 that changes postinstall to run the ibmtelemetry package but I think that will not fix it for node 20. Try this in node20/npm 10

npm add @carbon/icon-helpers

That package also includes ibmtelemetry and I get this error:

npm ERR! code 126
npm ERR! path /private/tmp/app-name-20/node_modules/@carbon/icon-helpers
npm ERR! command failed
npm ERR! command sh -c ibmtelemetry --config=telemetry.yml
npm ERR! sh: /private/tmp/app-name-20/node_modules/.bin/ibmtelemetry: Permission denied

So more clues but no solution. :-(

[liucgbj]

Verified on Ubuntu 22.04 LTS, Node v20.13.1, npm 10.5.2, no luck and issue still here.

[morpheux]

any news on this? @davidnixon

[benceszenassy]

I fiddled with it a little, npm fails but pnpm and yarn works ok in wsl, node 20, npm 10.

I think the difference is when each package manager resolve postinstall scripts. I cant seem to find a detailed description from how it works, but in the registries they use the original postinstall script, maybe npm read from there and pnpm / yarn read from installed dependencies package.json.

npm registry

...
    "3.0.15": {
      "name": "@carbon/vue",
      "license": "Apache-2.0",
      "version": "3.0.15",
      "description": "A collection of components for the Carbon Design System built using Vue.js",
      "packageManager": "[email protected]",
      "main": "dist/carbon-vue-3.umd.min.js",
      "types": "src/index.d.ts",
      "web-types": "dist/web-types.json",
      "scripts": {
        "postinstall": "node prepare.js && node .storybook/postinstall.js && ibmtelemetry --config=telemetry.yml",
        "prepack": "pinst --disable",
        "postpack": "pinst --enable",
        "build": "vue-cli-service build --target lib --name carbon-vue-3 ./src/index.js --no-clean",
        "lint": "vue-cli-service lint",
        "build-web-types": "vue-docgen-web-types --outFile dist/web-types.json",
        "add-components-exports": "node addNamedComponentExports.js",
        "ci-check": "yarn add-components-exports && yarn format:diff && yarn test && yarn build && yarn build-web-types",
        "format": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{build,es,lib,storybook,ts,umd,.coverage}/**'",
        "format:diff": "prettier --list-different '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
        "format:staged": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
        "lint:css": "stylelint '{packages,storybook}/**/*.{vue,scss}'",
        "lint:es": "eslint src/**/*.{js,vue}",
        "lint:style": "vue-cli-service lint:style",
        "serve:storybook": "cd ./storybook && yarn run serve",
        "test": "vue-cli-service test:unit --no-coverage"
      },
...

[KeenanKunzelman]

I'm also experiencing this on Manjaro currently.

[davidnixon]

It's definitely npm 20 + vs yarn or pnpm or npm 18- and it definitely related to a difference in how the the lifecycle scripts are executed. The relevant bits are:

json

        "postinstall": "node prepare.js && node .storybook/postinstall.js && ibmtelemetry --config=telemetry.yml",
        "prepack": "pinst --disable",
        "postpack": "pinst --enable",

in the installed version of package.json it looks like this: node_modules/@carbon/vue/package.json

    "_postinstall": "node prepare.js && node .storybook/postinstall.js && ibmtelemetry --config=telemetry.yml",
    "prepack": "pinst --disable",
    "postpack": "pinst --enable",

notice the "_" in front of "_postinstall" this should keep the postinstall script from running but it is running in npm 20+. My guess is that npm 20+ is also running the "postpack" lifecycle task which then enables "postinstall".

[davidnixon]

I think the right next step is to move all of the postinstall to a seperate js file and try catch the execution so that errors do not prevent the install.Thoughts?

[davidnixon]

@KeenanKunzelman @benceszenassy @morpheux @liucgbj @mbwhite @TNSaturday

Could I ask you to try again with the tgz attached to PR #1602 carbon-vue-3.0.15-4a6cf.tgz

Would be great if you added a comment to the PR or here to say if it worked or not.

[liucgbj]

@davidnixon , please see my result below.

ENV: Ubuntu 22.04 LTS, Node v20.14.0 npm 10.7.0 mem: 20GB

Reproduce Steps

Step1: run following command # tar -zxvf carbon-vue-3.0.15-4a6cf.tgz to extract files from carbon-vue-3.0.15-4a6cf.tgz

Step2: run following command to install it.

[davidnixon]

@liucgbj can you try carbon-vue-3.0.15-1c45c.tgz

Also, for your test case, I think the right command is be npm install --omit-dev. I have not looked at moving the dev install to node 18+.

[davidnixon]

@liucgbj I merged a fix for this an its is included in 3.0.16. Please lmk if it works for you. If it does not I will reopen this issue.

[morpheux]

@davidnixon using the package you provided it works, but with 3.0.16 i see this.

tryied with node_modules and package.json deleted

[liucgbj]

@davidnixon , please see below result for 3.0.16.

ENV: Ubuntu 22.04 LTS, Node v20.14.0 npm 10.7.0 mem: 20GB

[liucgbj]

@davidnixon , please see below result for carbon-vue-3.0.15-1c45c.tgz.

ENV: Ubuntu 22.04 LTS, Node v20.14.0 npm 10.7.0 mem: 20GB

[guilherme-gm]

I am still experiencing this issue in 3.0.17. (macOS)

Here are some things I've observed:

1. The issue seems related to NPM v10 combined with installing from NPM Registry;
2. Installing from zip, from path or from another registry (e.g. Artifactory) doesn't seem to be an issue;
3. NodeJS version doesn't matter (tested in 18 and 20);
4. Using NPM v9 it works fine, but NPM v10 will not.

Here is the error I am seeing:

$ npm i @carbon/vue
npm error code 1
npm error path /Users/<redacted>/<redacted>/node_modules/@carbon/vue
npm error command failed
npm error command sh -c node devPreinstall.js && node .storybook/postinstall.js
npm error node:internal/modules/cjs/loader:1143
npm error   throw err;
npm error   ^
npm error
npm error Error: Cannot find module '/Users/<redacted>/<redacted>/node_modules/@carbon/vue/devPreinstall.js'
npm error     at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
npm error     at Module._load (node:internal/modules/cjs/loader:981:27)
npm error     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)
npm error     at node:internal/main/run_main_module:28:49 {
npm error   code: 'MODULE_NOT_FOUND',
npm error   requireStack: []
npm error }
npm error
npm error Node.js v18.20.3
npm error A complete log of this run can be found in: /Users/<redacted>/.npm/_logs/2024-07-08T17_41_31_159Z-debug-0.log

what https://github.com/carbon-design-system/carbon-components-vue/issues/1576#issuecomment-2131206962 mentioned seems interesting, we can see that postinstall there is still the dev one.

not the cleanest solution, but I have been wondering whether we could join both postinstalls into a single script and check for the existence of some local file (that is not published)

[davidnixon]

latest repro steps:

this fails

rm -rf /tmp/npm-20 # if it exists
nvm use 20
npm create vite@latest app-name-20 -- --template vue
cd app-name-20
npm --cache /tmp/npm-20 i
npm --cache /tmp/npm-20 add @carbon/vue

this works

rm -rf /tmp/npm-20 # if it exists
nvm use 20
npm create vite@latest app-name-20 -- --template vue
cd app-name-20
npm --cache /tmp/npm-20 i
npm pack @carbon/vue
npm --cache /tmp/npm-20 add carbon-vue-3.0.18.tgz

So it only fails if installed from registry but not when install from tar ball. Hmmm!

I will use a local registry for future testing

[davidnixon]

Will try something like @guilherme-gm suggesting from slack

const fs = require('fs');
const { spawnSync } = require('child_process');

if (fs.existsSync('./devPreinstall.js')) {
  require('./devPreinstall.js');
  require('./.storybook/postinstall.js');
} else {
  spawnSync('npx', ['ibmtelemetry', '--config=telemetry.yml']);
}

[davidnixon]

I think we finally fix this one! @benceszenassy @guilherme-gm @TNSaturday @liucgbj @morpheux LMK if I need to re-open.