Cloudflare Pages + TurboRepo + PNPM
I have deployed one of my apps successfully to Vercel (so I know nothing wrong with my apps)
I want to deploy on Cloudflare Pages, I get this Error:
npm ERR! code EUNSUPPORTEDPROTOCOL. Which makes a lot of sense. as I specified in the root package.json as pnpm to be my packageManager.
Even though I set my build command correctly. Cloudflare Pages still always runs Installing project dependencies: npm install --progress=false, before my actual build command. So it fails, as I restricted it to only allow pnpm.
Why does Cloudflare pages assumes npm by default? Doesn't seem a way to disable it...
I am on Build System Version: 215 Replies
I've got this same issue right now when trying to deploy a Remix app to Cloudflare Pages and I'm stuck between two options which both don't work. I'm also on Build System Version 2.
Option 1:
- Build output directory:
apps/my-remix-app/public
- Root directory: / (the root of the monorepo)
Cloudflare Pages correctly uses pnpm to install dependencies and then deploys my app using the specified build directory, but the app doesn't work because the /functions directory (which Remix needs to actually be able to serve the app) isn't found because Cloudflare Pages is looking for it at /functions instead of apps/my-remix-app/functions.
Option 2:
- Build output directory: /public
- Root directory: /apps/my-remix-app
Cloudflare Pages incorrectly uses npm to install dependencies, which doesn't work because apps/my-remix-app/package.json has dependencies on other packages in my workspace
which npm can't resolve because workspace:* is pnpm syntax.
Suggested solution
Cloudflare Pages should use the packageManager property in the root directory's package.json to determine which package manager to use (in my case, that property looks like "packageManager": "[email protected]"), and if that property isn't set, use whatever logic currently exists to determine which package manager to use.I had the same issue, and the good solution was to copy functions folder to the root folder on build action.
Did you find any solution to this?
If I do as above and copy the folder to the root it fails because ERROR: Could not resolve "@remix-run/cloudflare-pages"
I'm able to get a simple monorepo working with pnpm and it's workspaces. Am keen to see how you solve this since I would like to move to turborepo at some point.
For reference, my build configuration is in the screenshot.
And my build script in the package.json for remix is
Is turborepo able to build in the remix directory or does it need to be in the root of the monorepo?
Turbo is able to build in the remix directory, but there is some issue on CF where it doesn't support workspaces/workspace packages when you build from the remix directory
So then you can't have shared repo packages
And if you try to build from the root directory using the --filter flag, it builds, but then it is missing the /functions directory which is not copied to bundled in the vite build
As OP comments in option 2, it seems like when trying to build from the remix (apps/*) directory Cloudflare builds with npm instead of pnpm and it doesn't pick up workspaces
I guess this is probably because it does not find a .pnpm-lock.yaml in the app directory
so it reverts to using npm
https://turbo.build/repo/docs/handbook/sharing-code/internal-packages
Are your shared repo packages internal or external?
I have an shared internal package that I configured per the turbo repo internal packages doc. Seems that when I build remix, vite will bundle in whatever it needs from the shared internal package.
The packages are shared internal
The package setup works locally without issue
But the problem is when I upload to cf and try to run the build command from /apps/remix, the CF vm errors out saying that there is no workspace support
and then running it from the repo root with the --filter flag the /functions dir does not get copied
Can you share what your build command looks like from the package.json? Are you able to ‘pnpm build’ and ‘pnpm start’ locally in the remix folder?
yes, locally it works
Scripts in package.json
You mentioned that cloudflare uses npm instead of pnpm when building your remix folder. What does your build configuration look like in cloudflare (see my screenshot above). I explicitly tell it to use
pnpm build. Also, root package.json contains the following so that cloudflare uses a specific pnpm version.
Hey. Both the root package.json and the remix package.sjon has pnpm defined under packageManager
I'm encountering similar issues. If I build from the root, cloudflare pages doesn't find my project's wrangler.toml.
So we have to set the root as apps/app. Now I have issues with it not detecting the root package.json settings like packageManager or its dependencies. Ok, I can mostly overcome that by explicitly declaring them in the app's package.json (can probably use https://github.com/microsoft/package-inherit to make it cleaner).
Now I have an issue where it's not reading the env vars even though they are clearly there in the build (my build command migrates the db, which is trying to connect to the local version of the URL "http://127.0.0.1:8080/v2/pipeline" even though the env var is logged before. I don't think this will be the only thing I encounter.
Anyone gotten a good setup with pages + turborepo + non-npm package manager?
@outsideurimagination Did you figure this out?
had to use wrangler to deploy instead of pages integrated method
Hm, interesting, did you also use internal repo packages in Turborepo?
If possible, can you share your wrangler setup / turbo.json /package.json