Yarn PnP results in esbuild errors, Yarn classic not an issue

[ivalentine]

Bridgetown Version: 1.2.0

To Reproduce

Create a new Bridgetown site, then run bundle exec bridgetown start.

Current behavior

When creating and starting a new site, I am encountering esbuild errors. The server process starts and I am able to view the site, but the CSS is broken. Here is the stack trace:

[Frontend] yarn run esbuild-dev
[Frontend] esbuild: frontend bundling started...
[Frontend] ✘ [ERROR] Could not resolve "index.css"
[Frontend]
[Frontend]     frontend/javascript/index.js:1:7:
[Frontend]       1 │ import "index.css"
[Frontend]         ╵        ~~~~~~~~~~~
[Frontend]
[Frontend]   The Yarn Plug'n'Play manifest forbids importing "index.css" here because it's not listed as a dependency of this package:
[Frontend]
[Frontend]     .pnp.cjs:962:33:
[Frontend]       962 │           "packageDependencies": [\
[Frontend]           ╵                                  ~~
[Frontend]
[Frontend]   You can mark the path "index.css" as external to exclude it from the bundle, which will remove this error.
[Frontend]
[Frontend] ✘ [ERROR] Could not resolve "syntax-highlighting.css"
[Frontend]
[Frontend]     frontend/javascript/index.js:2:7:
[Frontend]       2 │ import "syntax-highlighting.css"
[Frontend]         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~
[Frontend]
[Frontend]   The Yarn Plug'n'Play manifest forbids importing "syntax-highlighting.css" here because it's not listed as a dependency of this package:
[Frontend]
[Frontend]     .pnp.cjs:962:33:
[Frontend]       962 │           "packageDependencies": [\
[Frontend]           ╵                                  ~~
[Frontend]
[Frontend]   You can mark the path "syntax-highlighting.css" as external to exclude it from the bundle, which will remove this error.
[Frontend]
[Frontend] esbuild: build process error, cannot write manifest
[Frontend]   Exception raised: RuntimeError
[Frontend] Command failed with status (1): [yarn run esbuild-dev...]
[Frontend]                  1: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/file_utils.rb:67:in `block in create_shell_runner'
[Frontend]                  2: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/file_utils.rb:57:in `sh'
[Frontend]                  3: /Users/ianvalentine/dev/ivalentine-site/Rakefile:35:in `block (2 levels) in <top (required)>'
[Frontend]                  4: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/task.rb:281:in `block in execute'
[Frontend]                  5: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/task.rb:281:in `each'
[Frontend]          Backtrace: Use the --trace option for complete information.

Expected behavior

Creating and starting a new site should not result in any esbuild errors.

Screenshots

This is what the homepage looks like:

Computing environment (please complete the following information):

• OS: macOS Venture 13.2.1
• Browser: Chrome
• Browser Version: 111
• Ruby Version: 3.1.2

Additional context

I think the issue is pretty self-explanatory. Happy to provide any additional context if necessary. Thanks for your help!

[jaredcwhite]

Unfortunately, this is a known problem with the latest version of Yarn. Is there any way you can use Yarn Classic aka 1.x?

[ivalentine]

I've installed Yarn Classic, and I'm now getting a different error:

$ bundle exec bridgetown start
[Bridgetown]           Starting: Bridgetown v1.2.0 (codename "Bonny Slope")
[Server] * Puma version: 5.6.5 (ruby 3.1.2-p20) ("Birdie's Version")
[Server] * PID: 51818
[Server] * Listening on http://0.0.0.0:4000
[Server] Use Ctrl-C to stop
[Frontend] yarn run esbuild-dev
[Frontend] Internal Error: ivalentine-site@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
[Frontend]     at P0.getCandidates (/Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:435:5145)
[Frontend]     at yf.getCandidates (/Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:391:1264)
[Frontend]     at /Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:439:7693
[Frontend]     at of (/Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:390:11070)
[Frontend]     at ge (/Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:439:7673)
[Frontend]     at async Promise.allSettled (index 0)
[Frontend]     at async $s (/Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:390:10398)
[Frontend]     at async /Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:439:8205
[Frontend]     at async ti.startProgressPromise (/Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:390:47579)
[Frontend]     at async je.resolveEverything (/Users/ianvalentine/.cache/node/corepack/yarn/3.4.1/yarn.js:439:6233)
[Frontend]   Exception raised: RuntimeError
[Frontend] Command failed with status (1): [yarn run esbuild-dev...]
[Frontend]                  1: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/file_utils.rb:67:in `block in create_shell_runner'
[Frontend]                  2: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/file_utils.rb:57:in `sh'
[Frontend]                  3: /Users/ianvalentine/dev/ivalentine-site/Rakefile:35:in `block (2 levels) in <top (required)>'
[Frontend]                  4: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/task.rb:281:in `block in execute'
[Frontend]                  5: /Users/ianvalentine/.rvm/rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/gems/rake-13.0.6/lib/rake/task.rb:281:in `each'
[Frontend]          Backtrace: Use the --trace option for complete information.
[Bridgetown]        Environment: development
[Bridgetown]             Source: /Users/ianvalentine/dev/ivalentine-site/src
[Bridgetown]        Destination: /Users/ianvalentine/dev/ivalentine-site/output
[Bridgetown]     Custom Plugins: /Users/ianvalentine/dev/ivalentine-site/plugins
[Bridgetown]         Generating…
[Bridgetown]         Pagination: disabled. Enable in site config with pagination:\n enabled: true
[Bridgetown]            esbuild: There was an error parsing your esbuild manifest file. Please check your esbuild manifest file for any errors.
[Bridgetown]             Done! 🎉 Completed in less than 0.17 seconds.
[Bridgetown]
[Bridgetown]     Now serving at: http://localhost:4000
[Bridgetown]                     http://192.168.1.252:4000
[Bridgetown]

I've checked my Yarn version:

$ yarn -v
3.4.1
$ npx yarn -v
1.22.19

I don't recall installing Yarn 3.4.1, and it seemingly wasn't installed by NPM, so I'm not sure where it came from and how to uninstall it:

$ npm list -g
/Users/ianvalentine/.nvm/versions/node/v18.12.1/lib
├── @aws-amplify/cli@10.5.1
├── corepack@0.15.1
├── npm@9.1.3
├── serverless@3.24.1
└── typescript@4.8.4
$ npm uninstall yarn

removed 1 package, and audited 103 packages in 670ms

46 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$ npm uninstall -g yarn

up to date in 63ms
$ yarn -v
3.4.1
$ which yarn
/Users/ianvalentine/.nvm/versions/node/v18.12.1/bin/yarn

Any insight on this new error and whether Yarn 3.4.1 might still be the cause?

[ivalentine]

Per the Yarn docs, I ran yarn set version classic, which now gives me the correct version on the CLI:

$ yarn -v
1.22.19
$ npx yarn -v
1.22.19

However, I'm now getting the original resolution error again. 😞 Any other suggestions?

[jaredcwhite]

@ivalentine I'm afraid I don't have any other ideas. If you can provide a "working" (aka failing 😄) example in the form of a repo, ideally something which fails in GitPod, that would make it easier to troubleshoot.

[ivalentine]

@jaredcwhite Sure thing 🙂

Here is my repo: https://github.com/ivalentine/ivalentine-site

I just reproduced the error in Gitpod. If there is anything else you need, just let me know. Thanks!

[jaredcwhite]

@ivalentine Thanks for sharing that! I saw the exact issue you described, and I got it to work by deleting these files:

rm .pnp.cjs
rm .php.loader.mjs

[ivalentine]

@jaredcwhite Brilliant! That worked for me as well. Thanks so much 🙂

Is there a list of known issues on the Bridgetown website or repo? If not, may I suggest creating one and adding this issue?

With the benefit of hindsight, I now see that https://github.com/bridgetownrb/bridgetown/issues/543 is a similar issue. Being unfamiliar with Yarn and the differences between versions, though, made it difficult for me to diagnose this and come up with appropriate search terms.

Thanks again for a great project and for your help with this!

[jaredcwhite]

@ivalentine Glad it's working for you now. I'll leave this issue open for the time being. We're probably going to move away from requiring Yarn as a dependency altogether.

[ivalentine]

Sounds good. Thanks!

[jaredcwhite]

This seems to be resolved with the latest esbuild frontend configuration!