Can't switch to pnpm for Vaadin15

Flow
1

Steps to reproduce:

  1. Download starter project for Vaadin 15.0.5.

  2. Set property pnpmEnable to the vaadin-maven-plugin.

  3. Try to run mvn -Pproduction clean package

First stage (install) working fine with pnpm:

[INFO]
 --- vaadin-maven-plugin:15.0.5:build-frontend (default) @ my-starter-project ---
[INFO]
 Scanning classes to find frontend configurations and dependencies...
[INFO]
 Visited 693 classes. Took 672 ms.
[INFO]
 Visited 94 classes. Took 27 ms.
[INFO]
 writing file D:\my-starter-project\target\flow-frontend\package.json.
[INFO]
 writing file 'D:\my-starter-project\target\index.html'
[INFO]
 writing file 'D:\my-starter-project\target\index.ts'
[INFO]
 Parsing java files from [D:\my-starter-project\src\main\java]

[INFO]
 There are no connect endpoints to genertate.
[INFO]
 Running `pnpm install` to resolve and optionally download frontend dependencies. This may take a moment, please stand by...
[INFO]
 Generated pnpmfile hook file: 'D:\my-starter-project\pnpmfile.js'

C:\Users\victor\AppData\Roaming\npm\pnpm.cmd \
    --shamefully-hoist=true install
Using hooks from: D:\my-starter-project\pnpmfile.js
readPackage hook is declared. Manifests of dependencies might get overridden
Resolving: total 290, reused 290, downloaded 0

Unfortunately we have error during build-frontend goal execution:

+ webpack-dev-server 3.10.3
+ webpack-merge 4.2.2
[INFO]
 Frontend dependencies resolved successfully.
[INFO]
 Copying frontend resources from jar files ...
[INFO]
 Visited 126 resources. Took 42 ms.
[INFO]
 Updated D:\my-starter-project\target\frontend\generated-flow-imports-fallback.js
[INFO]
 Updated D:\my-starter-project\target\frontend\generated-flow-imports.js
[INFO]
 Updated D:\my-starter-project\target\frontend\generated-flow-imports.d.ts
[INFO]
 Running webpack ...

D:\NodeJS\node.exe \
    .\node_modules\webpack\bin\webpack.js --progress
D:\my-starter-project\node_modules\.pnpm\registry.npmjs.org\webpack-cli\3.3.11_webpack@4.42.0\node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^

Error: Cannot find module 'mkdirp'
Require stack:
- D:\my-starter-project\webpack.generated.js
- D:\my-starter-project\webpack.config.js

Vaadin-maven-plugin still use npm.

We can run webpack usung pnpx webpack command from command line. It is working.

2

Hi. I was not able to reproduce this with 15.0.5 and the steps above using a plain project starter https://github.com/vaadin/skeleton-starter-flow

Can you please try again after deleting node_modules in case there is some broken artifact there ? If it reproduces, please report an issue to https://github.com/vaadin/flow/issues/new

3

I think I found the source of the error.

It is independent-leaves=true option in .npmrc, which may be used only with hoist=false option.

Setting independent-leaves to true gives an average of 8% installation speed improvement but might break some packages that rely on location (as mentioned in documentation).

It is unclear for me whether this is a problem.

4

Victor Pyankov:
Steps to reproduce:

  1. Download starter project for Vaadin 15.0.5.

  2. Set property pnpmEnable to the vaadin-maven-plugin.

  3. Try to run mvn -Pproduction clean package

First stage (install) working fine with pnpm:

[INFO]

— vaadin-maven-plugin:15.0.5:build-frontend (default) @ my-starter-project —

[INFO]
Scanning classes to find frontend configurations and dependencies…
[INFO]
Visited 693 classes. Took 672 ms.
[INFO]
Visited 94 classes. Took 27 ms.
[INFO]
writing file D:\my-starter-project\target\flow-frontend\package.json.
[INFO]
writing file ‘D:\my-starter-project\target\index.html’
[INFO]
writing file ‘D:\my-starter-project\target\index.ts’
[INFO]
Parsing java files from [D:\my-starter-project\src\main\java]

[INFO]
There are no connect endpoints to genertate.
[INFO]
Running pnpm install to resolve and optionally download frontend dependencies. This may take a moment, please stand by…
[INFO]
Generated pnpmfile hook file: ‘D:\my-starter-project\pnpmfile.js’

C:\Users\victor\AppData\Roaming\npm\pnpm.cmd
–shamefully-hoist=true install
Using hooks from: D:\my-starter-project\pnpmfile.js
readPackage hook is declared. Manifests of dependencies might get overridden
Resolving: total 290, reused 290, downloaded 0


Unfortunately we have error during build-frontend goal execution:
  • webpack-dev-server 3.10.3
  • webpack-merge 4.2.2
    [INFO]
    Frontend dependencies resolved successfully.
    [INFO]
    Copying frontend resources from jar files …
    [INFO]
    Visited 126 resources. Took 42 ms.
    [INFO]
    Updated D:\my-starter-project\target\frontend\generated-flow-imports-fallback.js
    [INFO]
    Updated D:\my-starter-project\target\frontend\generated-flow-imports.js
    [INFO]
    Updated D:\my-starter-project\target\frontend\generated-flow-imports.d.ts
    [INFO]
    Running webpack …

D:\NodeJS\node.exe
.\node_modules\webpack\bin\webpack.js --progress
D:\my-starter-project\node_modules.pnpm\registry.npmjs.org\webpack-cli\3.3.11_webpack@4.42.0\node_modules\webpack-cli\bin\cli.js:93
throw err;
^

Error: Cannot find module ‘mkdirp’
Require stack:

  • D:\my-starter-project\webpack.generated.js
  • D:\my-starter-project\webpack.config.js

Vaadin-maven-plugin still use `npm`.

We can run webpack usung `pnpx webpack` command from command line. It is working.

try adding this to application.properties

Ensure use of pnpm

vaadin.pnpm.enable = true

best regards