Default NodeJS version 18.17.1 breaks default SvelteKit app build in Cloudflare Pages.

[onnimonni]

Hey!

I used the default create sveltekit command and created a git repository and pushed it to github

$ 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.

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

$ 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 <script lang="ts">

✔ 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!