Cannot install carbon-vue on fresh Vue 3 project #1576

TNSaturday · 2024-02-26T09:45:17Z

[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

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

Additional information

The text was updated successfully, but these errors were encountered:

benceszenassy · 2024-02-29T21:38:15Z

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 · 2024-03-10T21:05:28Z

^^ 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 · 2024-04-19T10:37:55Z

@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 whitemat@uk.ibm.com if I can help

morpheux · 2024-04-29T15:57:46Z

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

mbwhite · 2024-05-03T14:51:23Z

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

Ecpii · 2024-05-09T18:44:42Z

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 · 2024-05-09T18:49:58Z

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 · 2024-05-09T21:16:39Z

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

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

this fails

nvm use 20 - Now using node v20.13.1 (npm v10.5.2)
Set up new Vue project: npm create vite@latest app-name -- --template vue
cd into directory and run npm install
Ensure that Vue app itself is running.
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 · 2024-05-19T09:18:57Z

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

morpheux · 2024-05-24T15:25:07Z

any news on this? @davidnixon

benceszenassy · 2024-05-25T10:44:56Z

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": "yarn@3.2.0",
      "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 · 2024-05-31T13:58:08Z

I'm also experiencing this on Manjaro currently.

davidnixon · 2024-06-03T18:33:34Z

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 · 2024-06-03T18:35:04Z

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 · 2024-06-03T19:40:01Z

@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 · 2024-06-08T07:35:18Z

@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 · 2024-06-09T15:22:37Z

@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 · 2024-06-09T23:49:56Z

@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 · 2024-06-10T13:07:20Z

@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 · 2024-06-11T15:09:57Z

@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 · 2024-06-11T15:42:02Z

@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 · 2024-07-08T18:25:06Z

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

Here are some things I've observed:

The issue seems related to NPM v10 combined with installing from NPM Registry;
Installing from zip, from path or from another registry (e.g. Artifactory) doesn't seem to be an issue;
NodeJS version doesn't matter (tested in 18 and 20);
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 #1576 (comment) 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 · 2024-07-23T16:17:54Z

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 · 2024-07-23T16:18:51Z

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 · 2024-08-22T16:51:55Z

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

davidnixon added the status: waiting for author's response 💬 label Mar 10, 2024

davidnixon mentioned this issue Jun 3, 2024

fix: npm 20+ install #1602

Merged

1 task

davidnixon closed this as completed Jun 9, 2024

davidnixon reopened this Jul 9, 2024

davidnixon mentioned this issue Jul 11, 2024

build: move dev postinstall #1611

Merged

1 task

davidnixon removed the status: waiting for author's response 💬 label Jul 25, 2024

This was referenced Jul 25, 2024

fix: 1576 again #1617

Merged

build: move dev postinstall #1616

Closed

davidnixon closed this as completed Aug 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot install carbon-vue on fresh Vue 3 project #1576

Cannot install carbon-vue on fresh Vue 3 project #1576

TNSaturday commented Feb 26, 2024 •

edited

Loading

benceszenassy commented Feb 29, 2024

davidnixon commented Mar 10, 2024

mbwhite commented Apr 19, 2024

morpheux commented Apr 29, 2024 •

edited

Loading

mbwhite commented May 3, 2024

Ecpii commented May 9, 2024

mbwhite commented May 9, 2024

davidnixon commented May 9, 2024

liucgbj commented May 19, 2024

morpheux commented May 24, 2024

benceszenassy commented May 25, 2024

KeenanKunzelman commented May 31, 2024

davidnixon commented Jun 3, 2024

davidnixon commented Jun 3, 2024

davidnixon commented Jun 3, 2024

liucgbj commented Jun 8, 2024

davidnixon commented Jun 9, 2024

davidnixon commented Jun 9, 2024

morpheux commented Jun 10, 2024 •

edited

Loading

liucgbj commented Jun 11, 2024

liucgbj commented Jun 11, 2024

guilherme-gm commented Jul 8, 2024 •

edited

Loading

davidnixon commented Jul 23, 2024

davidnixon commented Jul 23, 2024

davidnixon commented Aug 22, 2024

Cannot install carbon-vue on fresh Vue 3 project #1576

Cannot install carbon-vue on fresh Vue 3 project #1576

Comments

TNSaturday commented Feb 26, 2024 • edited Loading

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

Detailed description

Steps to reproduce the issue

Additional information

benceszenassy commented Feb 29, 2024

davidnixon commented Mar 10, 2024

mbwhite commented Apr 19, 2024

morpheux commented Apr 29, 2024 • edited Loading

mbwhite commented May 3, 2024

Ecpii commented May 9, 2024

mbwhite commented May 9, 2024

davidnixon commented May 9, 2024

this works

this fails

liucgbj commented May 19, 2024

morpheux commented May 24, 2024

benceszenassy commented May 25, 2024

KeenanKunzelman commented May 31, 2024

davidnixon commented Jun 3, 2024

davidnixon commented Jun 3, 2024

davidnixon commented Jun 3, 2024

liucgbj commented Jun 8, 2024

davidnixon commented Jun 9, 2024

davidnixon commented Jun 9, 2024

morpheux commented Jun 10, 2024 • edited Loading

liucgbj commented Jun 11, 2024

liucgbj commented Jun 11, 2024

guilherme-gm commented Jul 8, 2024 • edited Loading

davidnixon commented Jul 23, 2024

this fails

this works

davidnixon commented Jul 23, 2024

davidnixon commented Aug 22, 2024

TNSaturday commented Feb 26, 2024 •

edited

Loading

morpheux commented Apr 29, 2024 •

edited

Loading

morpheux commented Jun 10, 2024 •

edited

Loading

guilherme-gm commented Jul 8, 2024 •

edited

Loading