search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
597 stars 176 forks source link

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

Closed TNSaturday closed 3 weeks ago

TNSaturday commented 4 months ago

[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 commented 4 months ago

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 commented 3 months ago

^^ 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 commented 2 months ago

@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 commented 2 months ago

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

image
mbwhite commented 1 month ago

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

Ecpii commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

image
morpheux commented 1 month ago

any news on this? @davidnixon

benceszenassy commented 1 month ago

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 commented 1 month ago

I'm also experiencing this on Manjaro currently.

davidnixon commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

@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

image

Step2: run following command to install it.

image image
davidnixon commented 3 weeks ago

@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 commented 3 weeks ago

@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 commented 2 weeks ago

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

image

tryied with node_modules and package.json deleted

liucgbj commented 2 weeks ago

@davidnixon , please see below result for 3.0.16.

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

image image
liucgbj commented 2 weeks ago

@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

image image