Error using Encore 4 + yarn pnp: cannot find package from Babel

[weaverryan]

Hi!

I'm hoping to get some help from @Kocal. When testing the upcoming Encore v4, normal node & yarn still work, but yarn pnp is not yet working, and I'm not sure why. In a "vanilla" Encore install, when running Encore, I get the error:

cannot find package '@babel/plugin-proposal-class-properties'

I've reproduced it here (this is a vanilla Encore, converted to yarn pnp): https://github.com/weaverryan/encore4-testing

WDYT? I'm wondering if pnp will also force us to move babel-loader @babel/core @babel/preset-env into peerDependencies as well, meaning the user would need to have it installed in their local app. But that's just a guess.

Cheers!

[Kocal]

Hi!

I think you need to use require.resolve() here (in .configureBabel()), like it was done here in Encore.

I'm wondering if pnp will also force us to move babel-loader @babel/core @babel/preset-env into peerDependencies as well, meaning the user would need to have it installed in their local app.

TBH I never was a big fan of having Babel dependencies in Encore, I've always installed them myself to prevent some issues (different Babel versions due to package manager policy).
Moving them to peerDependencies and making them optional would be very nice.

[Kocal]

When using require.resolve() :

➜  encore4-testing git:(main) ✗ yarn dev
Running webpack ...

  Error: Your application tried to access @babel/plugin-proposal-class-properties, but it isn't declared in your dependencies; this makes the require call ambiguous a  nd unsound.

  Required package: @babel/plugin-proposal-class-properties
  Required by: /Users/halliaume/workspace-os/encore4-testing/

  Require stack:
  - /Users/halliaume/workspace-os/encore4-testing/webpack.config.js
  - /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/webpack-cli-virtual-0b5ace5a50/0/cache/webpack-cli-npm-4.10.0-09cee8c457-2ff5355ac3.zip/node_modul  es/webpack-cli/lib/webpack-cli.js
  - /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/webpack-cli-virtual-0b5ace5a50/0/cache/webpack-cli-npm-4.10.0-09cee8c457-2ff5355ac3.zip/node_modul  es/webpack-cli/lib/bootstrap.js
  - /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/webpack-cli-virtual-0b5ace5a50/0/cache/webpack-cli-npm-4.10.0-09cee8c457-2ff5355ac3.zip/node_modul  es/webpack-cli/bin/cli.js
  - /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/webpack-virtual-56df3fe76f/0/cache/webpack-npm-5.74.0-f5b838a00d-320c41369a.zip/node_modules/webpa  ck/bin/webpack.js
  - /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@symfony-webpack-encore-virtual-81242bd7a1/0/cache/@symfony-webpack-encore-https-405e89f081-90839f  7781.zip/node_modules/@symfony/webpack-encore/bin/encore.js

  - .pnp.cjs:17559 Function.require$$0.Module._resolveFilename
    /Users/halliaume/workspace-os/encore4-testing/.pnp.cjs:17559:13

  - helpers:108 Function.resolve
    node:internal/modules/cjs/helpers:108:19

  - webpack.config.js:49 Object.<anonymous>
    /Users/halliaume/workspace-os/encore4-testing/webpack.config.js:49:37

  - apply-options-callback.js:13 module.exports
    [@symfony-webpack-encore-https-405e89f081-90839f7781.zip]/[@symfony]/webpack-encore/lib/utils/apply-options-callback.js:13:36

  - babel.js:96 Object.getLoaders
    [@symfony-webpack-encore-https-405e89f081-90839f7781.zip]/[@symfony]/webpack-encore/lib/loaders/babel.js:96:27

  - config-generator.js:313 ConfigGenerator.buildRulesConfig
    [@symfony-webpack-encore-https-405e89f081-90839f7781.zip]/[@symfony]/webpack-encore/lib/config-generator.js:313:38

  - config-generator.js:89 ConfigGenerator.getWebpackConfig
    [@symfony-webpack-encore-https-405e89f081-90839f7781.zip]/[@symfony]/webpack-encore/lib/config-generator.js:89:29

  - config-generator.js:629 module.exports
    [@symfony-webpack-encore-https-405e89f081-90839f7781.zip]/[@symfony]/webpack-encore/lib/config-generator.js:629:22

  - index.js:1646 Encore.getWebpackConfig
    [@symfony-webpack-encore-https-405e89f081-90839f7781.zip]/[@symfony]/webpack-encore/index.js:1646:16

  - EncoreProxy.js:51 Proxy.minDistance
    [@symfony-webpack-encore-https-405e89f081-90839f7781.zip]/[@symfony]/webpack-encore/lib/EncoreProxy.js:51:53

After installing @babel/plugin-proposal-class-properties as a dev dependency:

➜  encore4-testing git:(main) ✗ yarn dev
Running webpack ...

 ERROR  Failed to compile with 1 errors                                                                                                                       16:11:15

 error  in ./assets/app.js                                                                                                                                    16:11:15

Module build failed (from ./.yarn/__virtual__/babel-loader-virtual-31b64a653f/0/cache/babel-loader-npm-8.2.5-e749e26bb5-a660555788.zip/node_modules/babel-loader/lib/index.js):
Error: [BABEL]: @babel/helper-create-class-features-plugin tried to access @babel/core (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: @babel/core
Required by: @babel/helper-create-class-features-plugin@virtual:fac9909641c3d3420f97f86a58282556d79b784ba29a0d33f6eb62556d1d2c3fcf8056fdf81460c9f13c7f65633b5fbff4b0f6803dee22ebefa9a6268aedf44a#npm:7.18.13 (via /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@babel-helper-create-class-features-plugin-virtual-f7a49d8126/0/cache/@babel-helper-create-class-features-plugin-npm-7.18.13-f87498fa15-3d2da92a54.zip/node_modules/@babel/helper-create-class-features-plugin/lib/)

Ancestor breaking the chain: @symfony/webpack-encore@virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#https://github.com/symfony/webpack-encore.git#commit=417981c3e3f089c911cef9648a405215de3b5a04
Ancestor breaking the chain: root-workspace-0b6124@workspace:.


Require stack:
- /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@babel-helper-create-class-features-plugin-virtual-f7a49d8126/0/cache/@babel-helper-create-class-features-plugin-npm-7.18.13-f87498fa15-3d2da92a54.zip/node_modules/@babel/helper-create-class-features-plugin/lib/index.js
- /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@babel-plugin-proposal-class-properties-virtual-fac9909641/0/cache/@babel-plugin-proposal-class-properties-npm-7.18.6-5f5c2d730f-49a78a2773.zip/node_modules/@babel/plugin-proposal-class-properties/lib/index.js
- /Users/halliaume/workspace-os/encore4-testing/.yarn/cache/@babel-core-npm-7.18.13-083609f8de-c7ee5b2c10.zip/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/halliaume/workspace-os/encore4-testing/.yarn/cache/@babel-core-npm-7.18.13-083609f8de-c7ee5b2c10.zip/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/halliaume/workspace-os/encore4-testing/.yarn/cache/@babel-core-npm-7.18.13-083609f8de-c7ee5b2c10.zip/node_modules/@babel/core/lib/config/files/index.js
- /Users/halliaume/workspace-os/encore4-testing/.yarn/cache/@babel-core-npm-7.18.13-083609f8de-c7ee5b2c10.zip/node_modules/@babel/core/lib/index.js
- /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@symfony-webpack-encore-virtual-81242bd7a1/0/cache/@symfony-webpack-encore-https-405e89f081-90839f7781.zip/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js
- /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@symfony-webpack-encore-virtual-81242bd7a1/0/cache/@symfony-webpack-encore-https-405e89f081-90839f7781.zip/node_modules/@symfony/webpack-encore/bin/encore.js (While processing: /Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@babel-plugin-proposal-class-properties-virtual-fac9909641/0/cache/@babel-plugin-proposal-class-properties-npm-7.18.6-5f5c2d730f-49a78a2773.zip/node_modules/@babel/plugin-proposal-class-properties/lib/index.js)
    at Function.require$$0.Module._resolveFilename (/Users/halliaume/workspace-os/encore4-testing/.pnp.cjs:17596:13)
    at Function.require$$0.Module._load (/Users/halliaume/workspace-os/encore4-testing/.pnp.cjs:17450:42)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/halliaume/workspace-os/encore4-testing/.yarn/__virtual__/@babel-helper-create-class-features-plugin-virtual-f7a49d8126/0/cache/@babel-helper-create-class-features-plugin-npm-7.18.13-f87498fa15-3d2da92a54.zip/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:26:13)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.require$$0.Module._extensions..js (/Users/halliaume/workspace-os/encore4-testing/.pnp.cjs:17640:33)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.require$$0.Module._load (/Users/halliaume/workspace-os/encore4-testing/.pnp.cjs:17480:14)

And after adding @babel/core as a dev dependency:

➜  encore4-testing git:(main) ✗ yarn dev
Running webpack ...

 DONE  Compiled successfully in 546ms                                                                                                                         16:12:20

5 files written to public/build
Entrypoint app [big] 593 KiB = runtime.js 14.5 KiB vendors-_yarn___virtual___symfony-stimulus-bridge-virtual-a735b8ea3c_0_cache_symfony-stimulus-df5c09.js 555 KiB app.css 1.03 KiB app.js 22.2 KiB
webpack compiled successfully

[Kocal]

I'm gonna make the required changes to make Encore fully compatible with Yarn PNP.

[Kocal]

Fixed in #1150, thanks for reporting this issue :)