Failed to use Primevue 4 with yarn

[ancasicolica]

Describe the bug

Upgraded my projects from PrimeVue 3 to 4. When using yarn (v4.3.1) as packet manager I can't build my webapps having several errors. When using npm instead, no errors occur, everything is ok. Not sure whether this is a PrimeVue or yarn bug, reporting it here as yarn is mentioned as one of the means for installing PrimeVue.

Reproducer

none (not applicable)

PrimeVue version

4.0.0

Vue version

3.x

Language

ES6

Build / Runtime

Vue CLI App

Browser(s)

n/a

Steps to reproduce the behavior

1. Remove node_modules: rm -rf node_modules
2. Install dependencies: yarn
3. Using webpack to build the application, this fails, just providing one of 30 errors:

Module not found: Error: Can't resolve '@primeuix/utils/object' in '/Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/@primevue-core-virtual-9af2ca7349/package/api'
resolve '@primeuix/utils/object' in '/Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/@primevue-core-virtual-9af2ca7349/package/api'
  Parsed request is a module
  using description file: /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/@primevue-core-virtual-9af2ca7349/package/api/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/@primevue-core-virtual-9af2ca7349/package/api/node_modules doesn't exist or is not a directory
      /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/@primevue-core-virtual-9af2ca7349/package/node_modules doesn't exist or is not a directory
      looking for modules in /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/@primevue-core-virtual-9af2ca7349/node_modules
        /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/@primevue-core-virtual-9af2ca7349/node_modules/@primeuix/utils doesn't exist
      /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/.store/node_modules doesn't exist or is not a directory
      /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/kc/Code/ferropoly/ferropoly-editor/node_modules
        /Users/kc/Code/ferropoly/ferropoly-editor/node_modules/@primeuix/utils doesn't exist
      /Users/kc/Code/ferropoly/node_modules doesn't exist or is not a directory
      /Users/kc/Code/node_modules doesn't exist or is not a directory
      /Users/kc/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./node_modules/.store/@primevue-core-virtual-9af2ca7349/package/config/index.mjs 2:0-53 139:11-38 139:40-64 139:66-94 139:96-121 139:123-145 139:147-173 140:14-36 140:38-64 140:66-91 140:93-130 140:132-160 140:162-202 141:11-34 141:36-63 141:65-92 141:94-120
 @ ./node_modules/.store/primevue-npm-4.0.0-1e6ea9a7b7/package/config/index.mjs 1:0-38 1:0-38 2:0-48 2:0-48
 @ ./webapp-v4/common/lib/appFactory.js 8:0-39 48:10-18
 @ ./webapp-v4/apps/test/app.js 7:0-55 16:0-12

4. Removing node_modules again: rm -rf node_modules
5. Install dependencies using npm: nmp i
6. Build application: everything ok, no error messages

Expected behavior

Using yarn should have the same effect as npm

[mertsincan]

Interesting! I couldn't replicate it. Could you please attach a sample project with your config?

[antlionguard]

same for the using nuxt with pnpm.

[mertsincan]

Hmm, this problem might be related to 'peerDependencies'. The '@primeuix/styled' dependency in primevue installs the '@primeuix/utils' package. Maybe, a project where I can replicate these problems will help me examine them in more detail. I tried it with our example projects, but I could not replicate it.

[antlionguard]

i'm using

shamefully-hoist=true
strict-peer-dependencies=false

in my .npmrc

maybe related with these config. i will try without this config and i keep here updated.

[mertsincan]

Thanks @antlionguard ;)

[ancasicolica]

I used the settings from @antlionguard without any effect.

Additional information:

yarn explain peer-requirements results in the following output concering primevue:

p79274 → ✘ primevue@npm:4.0.0 doesn't provide @primeuix/utils to @primevue/core@npm:4.0.0 [5c08a]
p4d0cb → ✓ primevue@npm:4.0.0 doesn't provide @types/primeuix__utils to @primevue/core@npm:4.0.0 [5c08a]
p1afd0 → ✓ primevue@npm:4.0.0 doesn't provide @types/vue to @primevue/core@npm:4.0.0 [5c08a]
pf3be5 → ✘ primevue@npm:4.0.0 doesn't provide vue to @primevue/core@npm:4.0.0 [5c08a]

I have a simple playground project which I wanted to use for reproduction - an I failed, the application can be built. But the output of yarn explain peer-requirements is still the same.

When I look in to the node_modules/@primeuix directory, I find a very different setting:

In the application which fails:

kc@mbp-kc @primeuix % ls -al
total 0
drwxr-xr-x   3 kc  staff    96 Jul  8 20:17 .
drwxr-xr-x  78 kc  staff  2496 Jul  8 20:17 ..
lrwxr-xr-x   1 kc  staff    55 Jul  8 20:17 styled -> ../.store/@primeuix-styled-npm-0.0.5-56e1666c0e/package

In the playground project:

kc@mbp-kc @primeuix % ls -al
total 0
drwxr-xr-x    4 kc  staff    128 Jul  8 20:17 .
drwxr-xr-x  467 kc  staff  14944 Jul  8 20:17 ..
drwxr-xr-x    8 kc  staff    256 Jul  8 20:17 styled
drwxr-xr-x   13 kc  staff    416 Jul  8 20:17 utils

What I did to reproduce the effect:

1. Cloned my repo: git clone git@github.com:ancasicolica/ferropoly-editor.git
2. cd ferropoly-editor/
3. git checkout webui-4
4. Install using yarn: yarn
5. Running webpack to build the application: grunt webpack:dev

=> produces 45 errors.

6. Remove node_modules: rm -rf node_modules
7. Install using npm: npm i
8. Running webpack to build the application: grunt webpack:dev

=> Everything is ok!

[mertsincan]

Thank you so much, @ancasicolica ;) This really helped me. Fixed for the next version.

[ancasicolica]

Thanks a lot @mertsincan , this was a first class support handling!