cloudflare / cloudflare/pages-build-image
Default NodeJS version 18.17.1 breaks default SvelteKit app build in Cloudflare Pages.
- Dominant language
- No language data
- Stars
- 43
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
Hey!
I used the default create sveltekit command and created a git repository and pushed it to github
```bash
$ npm create cloudflare@latest my-svelte-app -- --framework=svelte
$ cd my-svelte-app
$ gh repo create my-svelte-app --private --source=. --remote=origin
$ git push origin HEAD
$ cat package.json | grep typescript-eslint
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
```
After this I visited `https://dash.cloudflare.com/MY-ACCOUNT-ID-HERE/pages/new/provider/github` and deployed the app.
The default version for the `typescript-eslint/parser` is 7.6.0 as of now and default NodeJS version seems to 18.17.1 [according to this documentation page](https://developers.cloudflare.com/pages/configuration/language-support-and-tools/#supported-languages-and-tools).
Because of this the svelte kit app can't be deployed to Cloudflare pages and results in this error:
```
17:39:38.540 | Successfully read wrangler.toml configuration file
-- | --
17:39:38.696 | Detected the following tools from environment: npm@9.6.7, pnpm@8.7.1, nodejs@18.17.1
17:39:39.499 | Installing project dependencies: pnpm install
17:39:40.187 | Lockfile is up to date, resolution step is skipped
17:39:40.214 | ERR_PNPM_UNSUPPORTED_ENGINEβ Unsupported environment (bad pnpm and/or Node.js version)
17:39:40.215 |
17:39:40.215 | Your Node version is incompatible with "/@typescript-eslint/eslint-plugin/7.6.0(@typescript-eslint/parser@7.6.0)(eslint@8.57.0)(typescript@5.4.5)".
17:39:40.215 |
17:39:40.215 | Expected version: ^18.18.0 \|\| >=20.0.0
17:39:40.215 | Got: v18.17.1
```
I was able to fix this by overriding the NodeJS version in `.node-version`
```bash
$ echo 21.7.2 > .node-version
$ git add .node-version
$ git commit -m "Force newer NodeJS"
$ git push origin HEAD
```
I recommend pushing the default version to higher so that others won't run into the same issue π.
See also the log from create Cloudflare cli here:
```
using create-cloudflare version 2.18.1
β Create an application with Cloudflare Step 1 of 3
β
β In which directory do you want to create your application?
β dir ./my-svelte-app
β
β What type of application do you want to create?
β type Website or web app
β
β Which development framework do you want to use?
β framework Svelte
β
ββContinue with Svelte via `npx create-svelte@6.0.10 my-svelte-app`
β
create-svelte version 6.0.10
β Welcome to SvelteKit!
β
β Which Svelte app template?
β Skeleton project
β
β Add type checking with TypeScript?
β Yes, using TypeScript syntax
β
β Select additional options (use arrow keys/space bar)
β Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
β
β Your project is ready!
β Typescript
Inside Svelte components, use
β ESLint
https://github.com/sveltejs/eslint-plugin-svelte
β Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
β Playwright
https://playwright.dev
β Vitest
https://vitest.dev
Install community-maintained integrations:
https://github.com/svelte-add/svelte-add
Next steps:
1: cd my-svelte-app
2: npm install
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
β Copying template files
β files copied to project directory
β
β Installing dependencies
β installed via `npm install`
β
β° Application created
β Configuring your application for Cloudflare Step 2 of 3
β
β Installing wrangler A command line tool for building Cloudflare Workers
β installed via `npm install wrangler --save-dev`
β
β Installing @cloudflare/workers-types
β installed via npm
β
β Adding latest types to `tsconfig.json`
β added @cloudflare/workers-types/2023-07-01
β
β Retrieving current workerd compatibility date
β compatibility date 2024-04-05
β
β Adding the Cloudflare Pages adapter
β installed @sveltejs/adapter-cloudflare
β
ββChanging adapter in svelte.config.js
β
ββUpdating global type definitions in app.d.ts
β
β Adding Wrangler files to the .gitignore file
β updated .gitignore file
β
β Updating `package.json` scripts
β updated `package.json`
β
β Do you want to use git for version control?
β yes git
β
β Initializing git repo
β initialized git
β
β Committing new files
β git commit
β
β° Application configured
β Deploy with Cloudflare Step 3 of 3
β
β Do you want to deploy your application?
β no deploy via `npm run deploy`
β
β APPLICATION CREATED Deploy your application with npm run deploy
β
β Navigate to the new directory cd my-svelte-app
β Run the development server npm run dev
β Preview your application npm run preview
β Deploy your application npm run deploy
β Read the documentation https://developers.cloudflare.com/pages
β Stuck? Join us at https://discord.gg/cloudflaredev
β
β° See you again soon!
```
Contributor guide
Research direction
Start by inspecting the build-image configuration that selects the default Node.js version, then compare it with the engine requirement shown for @typescript-eslint in package.json. Reproduce the default SvelteKit deployment using the reported Node.js version and confirm that the resulting Cloudflare Pages build succeeds with the updated default.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, typescript
- Domain
- build-system, cloud
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100