fix(sveltekit): Fix SvelteKit Cloudflare usage #14672
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| test-results | ||
| node_modules | ||
|
|
||
| # Output | ||
| .output | ||
| .vercel | ||
| .netlify | ||
| .wrangler | ||
| /.svelte-kit | ||
| /build | ||
|
|
||
| # OS | ||
| .DS_Store | ||
| Thumbs.db | ||
|
|
||
| # Env | ||
| .env | ||
| .env.* | ||
| !.env.example | ||
| !.env.test | ||
|
|
||
| # Vite | ||
| vite.config.js.timestamp-* | ||
| vite.config.ts.timestamp-* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| @sentry:registry=http://127.0.0.1:4873 | ||
| @sentry-internal:registry=http://127.0.0.1:4873 | ||
| engine-strict=true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| # sv | ||
|
|
||
| Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). | ||
|
|
||
| ## Creating a project | ||
|
|
||
| If you're seeing this, you've probably already done this step. Congrats! | ||
|
|
||
| ```bash | ||
| # create a new project in the current directory | ||
| npx sv create | ||
|
|
||
| # create a new project in my-app | ||
| npx sv create my-app | ||
| ``` | ||
|
|
||
| ## Developing | ||
|
|
||
| Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: | ||
|
|
||
| ```bash | ||
| npm run dev | ||
|
|
||
| # or start the server and open the app in a new browser tab | ||
| npm run dev -- --open | ||
| ``` | ||
|
|
||
| ## Building | ||
|
|
||
| To create a production version of your app: | ||
|
|
||
| ```bash | ||
| npm run build | ||
| ``` | ||
|
|
||
| You can preview the production build with `npm run preview`. | ||
|
|
||
| > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { expect, test } from '@playwright/test'; | ||
|
|
||
| test('home page has expected h1', async ({ page }) => { | ||
| await page.goto('/'); | ||
| await expect(page.locator('h1')).toBeVisible(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| { | ||
| "name": "sveltekit-cloudflare-pages", | ||
| "private": true, | ||
| "version": "0.0.1", | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite dev", | ||
| "build": "vite build", | ||
| "preview": "wrangler pages dev ./.svelte-kit/cloudflare --port 4173", | ||
| "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", | ||
| "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", | ||
| "test:e2e": "playwright test", | ||
| "test": "npm run test:e2e", | ||
| "test:build": "pnpm install && pnpm build", | ||
| "test:assert": "npm run test:e2e" | ||
| }, | ||
| "dependencies": { | ||
| "@sentry/sveltekit": "latest || *" | ||
| }, | ||
| "devDependencies": { | ||
| "@playwright/test": "^1.45.3", | ||
| "@sveltejs/adapter-cloudflare": "^4.8.0", | ||
| "@sveltejs/kit": "^2.9.0", | ||
| "@sveltejs/vite-plugin-svelte": "^5.0.0", | ||
| "svelte": "^5.0.0", | ||
| "svelte-check": "^4.0.0", | ||
| "typescript": "^5.0.0", | ||
| "vite": "^6.0.0", | ||
| "wrangler": "^3" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { defineConfig } from '@playwright/test'; | ||
|
|
||
| export default defineConfig({ | ||
| webServer: { | ||
| command: 'npm run build && npm run preview', | ||
| port: 4173 | ||
| }, | ||
|
|
||
| testDir: 'e2e' | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| // See https://svelte.dev/docs/kit/types#app.d.ts | ||
| // for information about these interfaces | ||
| declare global { | ||
| namespace App { | ||
| // interface Error {} | ||
| // interface Locals {} | ||
| // interface PageData {} | ||
| // interface PageState {} | ||
| // interface Platform {} | ||
| } | ||
| } | ||
|
|
||
| export {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <link rel="icon" href="%sveltekit.assets%/favicon.png" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| %sveltekit.head% | ||
| </head> | ||
| <body data-sveltekit-preload-data="hover"> | ||
| <div style="display: contents">%sveltekit.body%</div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { env } from '$env/dynamic/public'; | ||
| import * as Sentry from '@sentry/sveltekit'; | ||
|
|
||
| Sentry.init({ | ||
| dsn: env.PUBLIC_E2E_TEST_DSN, | ||
| }); | ||
|
|
||
| export const handleError = Sentry.handleErrorWithSentry(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { E2E_TEST_DSN } from '$env/static/private'; | ||
| import { handleErrorWithSentry, initCloudflareSentryHandle, sentryHandle } from '@sentry/sveltekit'; | ||
| import { sequence } from '@sveltejs/kit/hooks'; | ||
|
|
||
| export const handleError = handleErrorWithSentry(); | ||
|
|
||
| export const handle = sequence( | ||
| initCloudflareSentryHandle({ | ||
| dsn: E2E_TEST_DSN, | ||
| }), | ||
| sentryHandle(), | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| // place files you want to import through the `$lib` alias in this folder. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import type { PageServerLoad } from './$types'; | ||
|
|
||
| export const load: PageServerLoad = async function load() { | ||
| return { | ||
| message: 'From server load function.', | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <script lang="ts"> | ||
| let { data } = $props(); | ||
| </script> | ||
|
|
||
| <h1>Welcome to SvelteKit</h1> | ||
| <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p> | ||
|
|
||
| <p>{data.message}</p> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import adapter from "@sveltejs/adapter-cloudflare"; | ||
| import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; | ||
|
|
||
| /** @type {import('@sveltejs/kit').Config} */ | ||
| const config = { | ||
| // Consult https://svelte.dev/docs/kit/integrations | ||
| // for more information about preprocessors | ||
| preprocess: vitePreprocess(), | ||
|
|
||
| kit: { | ||
| // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. | ||
| // If your environment is not supported, or you settled on a specific environment, switch out the adapter. | ||
| // See https://svelte.dev/docs/kit/adapters for more information about adapters. | ||
| adapter: adapter() | ||
| } | ||
| }; | ||
|
|
||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "extends": "./.svelte-kit/tsconfig.json", | ||
| "compilerOptions": { | ||
| "allowJs": true, | ||
| "checkJs": true, | ||
| "esModuleInterop": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "resolveJsonModule": true, | ||
| "skipLibCheck": true, | ||
| "sourceMap": true, | ||
| "strict": true, | ||
| "moduleResolution": "bundler" | ||
| } | ||
| // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias | ||
| // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files | ||
| // | ||
| // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes | ||
| // from the referenced tsconfig.json - TypeScript does not merge them in | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { sveltekit } from '@sveltejs/kit/vite'; | ||
| import { defineConfig } from 'vite'; | ||
| import { sentrySvelteKit } from '@sentry/sveltekit'; | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [sentrySvelteKit({ autoUploadSourceMaps: false }), sveltekit()], | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| compatibility_date = "2024-12-17" | ||
| compatibility_flags = ["nodejs_compat"] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -20,6 +20,10 @@ | |||||||||||
| "./package.json": "./package.json", | ||||||||||||
| ".": { | ||||||||||||
| "types": "./build/types/index.types.d.ts", | ||||||||||||
| "worker": { | ||||||||||||
| "import": "./build/esm/index.worker.js", | ||||||||||||
| "require": "./build/cjs/index.worker.js" | ||||||||||||
| }, | ||||||||||||
|
There was a problem hiding this comment. not directly applicable to this line but: I had to make this change to the
Suggested change
However, even after this change, I get another error a bit later There was a problem hiding this comment. Sorry @Lms24 if this isn't the right place to discuss this, but is there any reason why we don't make this change in a separate PR? I'm having an issue where trying to import From reading #9872 (comment), it looks like ESM used to be broken, but I think 7f2e804 might have fixed it? But a similar change for remix seems to have not worked: #12742 There was a problem hiding this comment. @aloisklink sorry for only seeing your comment now: I agree, we should make this change separately. Thing is, as far as I know, SvelteKit transpiles to CJS (at least for Node-based environments). So I'm a bit hesitant to add an ESM entry point, especially because this works even less well than it currently works in CJS, with OpenTelemetry. Feel free to submit a PR and let's see what our tests have to see |
||||||||||||
| "browser": { | ||||||||||||
| "import": "./build/esm/index.client.js", | ||||||||||||
| "require": "./build/cjs/index.client.js" | ||||||||||||
|
|
@@ -40,6 +44,7 @@ | |||||||||||
| } | ||||||||||||
| }, | ||||||||||||
| "dependencies": { | ||||||||||||
| "@sentry/cloudflare": "8.44.0", | ||||||||||||
| "@sentry/core": "8.44.0", | ||||||||||||
| "@sentry/node": "8.44.0", | ||||||||||||
| "@sentry/opentelemetry": "8.44.0", | ||||||||||||
|
|
||||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './worker'; | ||
| // export * from './vite'; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit pick but can we rename the directory to
/tests/demo.test.ts? Just to be consistent with our other e2e test apps.