remix: [Bug]: Yarn 3 support?
Which Remix packages are impacted?
remix(Remix core)create-remix
What version of Remix are you using?
1.0.5
Steps to Reproduce
Trying to install dependencies with Yarn berry. My current Yarn version is v3.2.0-rc.5.
Log file:
# This file contains the result of Yarn building a package (azat-io@workspace:.)
# Script name: postinstall
(node:67592) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
EROFS: read-only filesystem, open '/node_modules/remix/package.json'
Dependencies in my package.json:
{
"dependencies": {
"@remix-run/node": "1.0.5",
"@remix-run/react": "1.0.5",
"@remix-run/serve": "1.0.5",
"@remix-run/server-runtime": "1.0.5",
"react": "17.0.2",
"react-dom": "17.0.2",
"remix": "1.0.5"
},
"devDependencies": {
"@remix-run/dev": "1.0.5",
"@types/react": "17.0.24",
"@types/react-dom": "17.0.9",
"typescript": "4.1.2"
}
}
Expected Behavior
Installation successful
Actual Behavior
Installation failed
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 10
- Comments: 41 (24 by maintainers)
I made some more progress! The build now runs fine with PnP and the dev server starts up correctly as well. To test my changes:
Clone and build my changed version of remix:
In the project you want to use yarn PnP in:
yarn set version canary. Yarn < 3.2.0 has a bug preventing remix to work with PnP.remixdependency from yourpackage.json, it just doesn’t work with PnP right now (I’ll see what I can do about that next)remix setup nodefrom yourpostinstallscript. It will fail when using PnPresolutionsentry to yourpackage.json: This makes sure you’re using the patched@remix-run/*versions instead of the original ones throughout your whole projectyarn add @yarnpkg/esbuild-plugin-pnp. This is an optional peer dependency I’ve added to@remix-run/devthat you’ll need when using PnP for the esbuild build to go throughyarn add express.@remix-run/servedepends on it as a peer dependency. Depending on your setup, you might be able to get away with adding express as a peer dependency insteadremixpackage to imports from@remix-run/*packages. E.g.:RemixBrowser→@remix-run/react/browserEntryContext,MetaFunction→@remix-run/server-runtime(you might have to add a dependency to@remix-run/server-runtimeto your project as well)@remix-run/reactAfter that, you should be able to start the dev server using
yarn devas usual.I hope I didn’t forget anything. I’ll draft a PR once I get around to get the
remixpackage to work with PnP.@tavoyne #1316 should be ready for merging, but feel free to test it yourself! Everything should work as long as you don’t import anything from the
remixpackage and use the@remix-run/*packages directly instead. Also check out the README from the yarn example I added in the PR: https://github.com/remix-run/remix/blob/7af1ed35603839d85866d3d793ecc89c2244236b/examples/yarn-pnp/README.mdI dug a bit deeper into what it would take to support yarn PnP, and these are my findings so far:
TLDR: you’re better off sticking to the
node-moduleslinker for now.remixpackage in the postinstall hook that will never be compatible with yarn PnP, and frankly is an anti-pattern (don’t overwrite files in packages, please). I ended up throwing outremixas a dependency and now import everything directly from the@remix-run/...packages as requiredyarn set version canary). (ref. yarnpkg/berry/issues/3687)esbuild: to makeReactavailable in all source files without having to explicitly import it, remix uses theinjectoption to add the contents of areact.tsfile to every compiled source file. While it is possible to read files inside the zipped pnp dependencies wihle running in node,esbuildtries to read those files from an executable written in go, which fails. I added some code tocompiler.tsin@remix-run/devto copy thereact.tsfile contents to a temporary build folder and include that file instead. Now the build goes through.For reference, this is my current
.yarnrc.yml, and these are the changes I made to thecompiler.tsfile to getesbuildto workThat’s where I’m at now, I’ll continue digging once I find some more time.
I was experiencing this as well! I actually recognized this as
esbuild(whichremixuses under the hood) not supportingyarn’s PnP resolver – (closed) issue for that is here: https://github.com/evanw/esbuild/issues/154To fix this, I’d normally use
@yarnpkg/esbuild-plugin-pnp, butremixdoes not support addingesbuildplugins – (closed) issue for that is here: https://github.com/remix-run/remix/issues/717. As a workaround, I used the extremely hacky override mentioned in that issue to add in@yarnpkg/esbuild-plugin-pnpto the compiler../esbuild.register.js:package.json:The next issue that I ran into was this:
Turns out,
@yarnpkg/esbuild-plugin-pnpadds thepnpnamespace to files loaded via PnP (so it knows how to process them later; this is common practice in theesbuildplugin world). The files it loads are emitted in theesbuildmanifest with filenames looking likepnp:/path/to/filename.ext.The issue is that to find the project’s entry point,
@remix-run/devis checking forentryPointFile === entryClientFile. This would normally be fine, because it’s an absolute path, but in this case, this check will be false for the correct file because of thepnp:prefix added by@yarnpkg/esbuild-plugin-pnpthat’s not normally there.So, the last step was to
yarn patch @remix-run/dev:After this patch was created and applied, I was able to get
remixworking withyarn@4.0.0-rc.6! Ya boi loves to live on the bleeding edge 🚀To the
remixdev team, I’d really love to properly add PnP support toremix. It seems like it should be as simple as adding in@yarnpkg/esbuild-plugin-pnpto the default list ofesbuildplugins (it’s a no-op if there’s no PnP API available) and applying a patch similar to the one above to@remix-run/dev. Happy to submit a PR if you’re interested!~@chaance This is has not been fixed — I still get an error when running
yarn dlx create-remix@latest:This may be solved by using
require.resolve("jscodeshift/bin/jscodeshift")instead, as mentioned here. That PR may include other fixes required for Yarn PNP.Same error when using
npx create-remix@latestto get around this error and then runningyarn dev.@lensbart Thanks for flagging, we’ll take a look 👍
If some googlers are specifically looking for Yarn workspaces support, I’ve created a separate discussion: https://github.com/remix-run/remix/discussions/3668
Somewhat related: when running
yarn dlx create-remix@latestinstead ofnpx create-remix@latest, you get the following error:yarn dlxis the idiomatic way to run packages without installing when using Yarn, and is analogous tonpx.The same error appears when running
yarn dev.I can also confirm that the install does not work with Yarn 2+ Plug N Play setup. The issue is mostly around the
postinstallcommand. Here is the first error triggered:When I then installed
@remix-run/server-runtime, this is the error I received:nodeLinkertechnically works BUT I would advocate that this isn’t really adding support for Yarn 2+, as this disables Plug N Play, which by default is enabled on new projects bootstrapped for Yarn 2+ (yarn init -2) and is forcing a pretty big architectural decision on a team for their entire project, that actually has some concrete benefits: https://yarnpkg.com/features/pnp. I would prefer just saying "we don’t support Yarn 2+ than going the route that has us recommending us opt out of its biggest feature.Thanks @rhefner - looks like it won’t be too complicated to make remix work with Yarn 2/3 👍
I am able to install on yarn v
3.0.2but when runningyarn buildusingremix@1.0.5I get the following error:Assuming this may also be related to module resolution using yarn 2?
@ezracelli That’s basically what I did in #1316 (https://github.com/remix-run/remix/pull/1316/files#diff-ef8b0a35f03b499672160742c2d6b9688717e8d6b923dde0e10d2631ab0c09d6) I even declared the eslint pnp plugin as an optional dependency, so it doesn’t even get loaded if you don’t need it. Unfortunately the PR never went anywhere and is outdated again, but I’d happily rebase it if it gets PnP support to remix
Thank you, @MichaelDeBoey.
yarn dlx create-remix@v0.0.0-nightly-34577c6-20220507now runs without error in a Yarn 3 monorepository using PnP.yarn devstill gives the following:Not sure how I can go about fixing this issue. I tried adding
@remix-run/reactandreact-domtoserverDependenciesToBundleinremix.config.js, to no avail. And it doesn’t seem like an error that can be fixed by configuringpackageExtensionsin.yarnrc.ymleither. I also tried adding"dependenciesMeta": { "@remix-run/react": { "built": false }, "react-dom": { "built": false } }to the monorepo’s rootpackage.json, but that didn’t help either.Thoughts?
@lensbart Your problem with
jscodeshiftwill be fixed by #3114https://github.com/remix-run/remix/pull/2359 has been merged and included in 1.3.4 which at least solves the basic setup for me.
I was able to get the remix “basic” template working with 1.3.4 in a yarn 3 monorepo (using node_modules resolution) by:
"postinstall": "remix setup node",from package.json before doing any installroot.tsximports to:entry.server.tsximports to:entry.client.tsimports to: