sveltejs/sapper

Hit brick wall when adding svelte-preprocess to minimal sapper example

Opened this issue · 21 comments

callumlocke commented

Describe the bug
I'm new to Svelte/Sapper. Tried following the svelte-preprocess "Getting Started" tutorial to get TypeScript working on an otherwise unmodified clone of the sapper-template. But the sapper dev server fails with a cryptic error:

(node:13833) UnhandledPromiseRejectionWarning: Error: Could not find chunk that owns index.svelte

It comes from this code in Sapper's create_manifest_data.js:

		if (!chunk) {
			// this should never happen!
			throw new Error(`Could not find chunk that owns ${component.file}`);
		}

I'm literally just trying to get TypeScript working with the default sapper template, following instructions precisely and doing nothing custom, and I hit a dead end. Using latest versions of everything (started from scratch this morning).

To Reproduce

  1. Create a sapper app from the template: npx degit "sveltejs/sapper-template#rollup" my-app
    • Install deps and run npm run dev – it launches fine.
  2. Follow the svelte-preprocess Getting Started guide, just up to the end of Step 3 (Configuring Preprocessors).
    • Only difference: change sourceMap: !production to sourceMap: dev, in line with sapper-template's rollup config.

Note I have not even attempted to modify any components yet to actually use TypeScript etc. - I haven't added any lang attributes or set default languages for svelte-preprocess.

Expected behavior
I should be able to run npm run dev as before.

Actual behavior
Running npm run dev fails with an unhandled rejection.

Stacktraces
If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Stack trace 
$ sapper dev
✗ client
@rollup/plugin-typescript: Couldn't process compiler options
(node:13833) UnhandledPromiseRejectionWarning: Error: Could not find chunk that owns index.svelte
    at /Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:570:10
    at Array.forEach (<anonymous>)
    at extract_css (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:564:13)
    at RollupResult.to_json (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:752:9)
    at handle_result (/Users/callum/code/my-app/node_modules/sapper/dist/dev.js:335:28)
    at /Users/callum/code/my-app/node_modules/sapper/dist/dev.js:429:5
    at WatchEmitter.<anonymous> (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:884:6)
    at WatchEmitter.emit (events.js:315:20)
    at Watcher.emit (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:611:22)
    at Watcher.run (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:649:18)
(node:13833) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:13833) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:13833) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tslib/tslib.es6.js' from '/Users/callum/code/my-app/node_modules/@rollup/plugin-typescript/dist'
    at /Users/callum/code/my-app/node_modules/resolve/lib/async.js:115:35
    at processDirs (/Users/callum/code/my-app/node_modules/resolve/lib/async.js:268:39)
    at isdir (/Users/callum/code/my-app/node_modules/resolve/lib/async.js:275:32)
    at /Users/callum/code/my-app/node_modules/resolve/lib/async.js:25:69
    at FSReqCallback.oncomplete (fs.js:171:21)
(node:13833) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

Information about your project:

  • Your browser and the version: N/A

  • Your operating system: macOS 10.15 Beta

  • svelte-preprocess version: 4.0.10

  • Rollup

callumlocke commented

Update: I tried commenting out the typescript() plugin in my rollup config, and the dev server now launches fine. And, encouragingly, I tried writing some SCSS in a component, and it seems to work correctly. So the problem seems to be specific to using the TypeScript rollup plugin.

benmccann commented

Here's an example project: https://github.com/babichjacob/sapper-typescript-graphql-template. It seems to work, so I'm not quite sure what issue you're having

pngwn commented

@callumlocke if you could provide your config we can check to see if anything is amiss.

callumlocke commented

@pngwn which config?

pngwn commented

Your rollup config.

callumlocke commented 
import resolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace'
import commonjs from '@rollup/plugin-commonjs'
import svelte from 'rollup-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'
import config from 'sapper/config/rollup.js'
import pkg from './package.json'

const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD

const onwarn = (warning, onwarn) =>
  (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
  (warning.code === 'CIRCULAR_DEPENDENCY' &&
    /[/\\]@sapper[/\\]/.test(warning.message)) ||
  onwarn(warning)

export default {
  client: {
    input: config.client.input(),
    output: config.client.output(),
    plugins: [
      // teach rollup how to handle typescript imports
      typescript({ sourceMap: dev }),

      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),
      }),
      svelte({
        preprocess: sveltePreprocess({
          sourceMap: dev,
          postcss: {
            plugins: [require('autoprefixer')()],
          },
        }),
        dev,
        hydratable: true,
        emitCss: true,
        preprocess: sveltePreprocess({
          sourceMap: dev,
        }),
      }),
      resolve({
        browser: true,
        dedupe: ['svelte'],
      }),
      commonjs(),

      legacy &&
        babel({
          extensions: ['.js', '.mjs', '.html', '.svelte'],
          babelHelpers: 'runtime',
          exclude: ['node_modules/@babel/**'],
          presets: [
            [
              '@babel/preset-env',
              {
                targets: '> 0.25%, not dead',
              },
            ],
          ],
          plugins: [
            '@babel/plugin-syntax-dynamic-import',
            [
              '@babel/plugin-transform-runtime',
              {
                useESModules: true,
              },
            ],
          ],
        }),

      !dev &&
        terser({
          module: true,
        }),
    ],

    preserveEntrySignatures: false,
    onwarn,
  },

  server: {
    input: config.server.input(),
    output: config.server.output(),
    plugins: [
      replace({
        'process.browser': false,
        'process.env.NODE_ENV': JSON.stringify(mode),
      }),
      svelte({
        generate: 'ssr',
        hydratable: true,
        dev,
      }),
      resolve({
        dedupe: ['svelte'],
      }),
      commonjs(),
    ],
    external: Object.keys(pkg.dependencies).concat(
      require('module').builtinModules
    ),

    preserveEntrySignatures: 'strict',
    onwarn,
  },

  serviceworker: {
    input: config.serviceworker.input(),
    output: config.serviceworker.output(),
    plugins: [
      resolve(),
      replace({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),
      }),
      commonjs(),
      !dev && terser(),
    ],

    preserveEntrySignatures: false,
    onwarn,
  },
}

The above is literally just the official sapper-template#rollup config, plus a few lines added according to the svelte-preprocess Geting Started guide.

If I comment out the typescript({ sourceMap: dev }) line, it works.

pngwn commented

You seem to have two preprocess keys in the client config and none in the server config.

pngwn commented

This actually may be because your extra preprocess config is overwriting your postcss config which is causing parsing errors.

pngwn commented

You will also need to put that typescript plugin in your server config as well.

callumlocke commented

OK, I've removed that duplicate key, and also added the typescript plugin to the server config, and put the same preprocess key in the server config:

import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) =>
	(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
	(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
	onwarn(warning);

export default {
	client: {
		input: config.client.input(),
		output: config.client.output(),
		plugins: [
			// teach rollup how to handle typescript imports
			typescript({ sourceMap: dev }),

			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			svelte({
				preprocess: sveltePreprocess({
					sourceMap: dev,
					postcss: {
						plugins: [require('autoprefixer')()]
					}
				}),
				dev,
				hydratable: true,
				emitCss: true
			}),
			resolve({
				browser: true,
				dedupe: ['svelte']
			}),
			commonjs(),

			legacy && babel({
				extensions: ['.js', '.mjs', '.html', '.svelte'],
				babelHelpers: 'runtime',
				exclude: ['node_modules/@babel/**'],
				presets: [
					['@babel/preset-env', {
						targets: '> 0.25%, not dead'
					}]
				],
				plugins: [
					'@babel/plugin-syntax-dynamic-import',
					['@babel/plugin-transform-runtime', {
						useESModules: true
					}]
				]
			}),

			!dev && terser({
				module: true
			})
		],

		preserveEntrySignatures: false,
		onwarn,
	},

	server: {
		input: config.server.input(),
		output: config.server.output(),
		plugins: [
			// teach rollup how to handle typescript imports
			typescript({ sourceMap: dev }),

			replace({
				'process.browser': false,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			svelte({
				preprocess: sveltePreprocess({
					sourceMap: dev,
					postcss: {
						plugins: [require('autoprefixer')()]
					}
				}),

				generate: 'ssr',
				hydratable: true,
				dev
			}),
			resolve({
				dedupe: ['svelte']
			}),
			commonjs()
		],
		external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),

		preserveEntrySignatures: 'strict',
		onwarn,
	},

	serviceworker: {
		input: config.serviceworker.input(),
		output: config.serviceworker.output(),
		plugins: [
			resolve(),
			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			commonjs(),
			!dev && terser()
		],

		preserveEntrySignatures: false,
		onwarn,
	}
};

But the problem remains. The only difference AFAICT is the stack trace now shows a 'server' error too:

❯ yarn dev
yarn run v1.22.4
$ sapper dev
✗ server
@rollup/plugin-typescript: Couldn't process compiler options
✗ client
@rollup/plugin-typescript: Couldn't process compiler options
(node:31772) UnhandledPromiseRejectionWarning: Error: Could not find chunk that owns index.svelte
    at /Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:570:10
    at Array.forEach (<anonymous>)
    at extract_css (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:564:13)
    at RollupResult.to_json (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:752:9)
    at handle_result (/Users/callum/code/my-app/node_modules/sapper/dist/dev.js:335:28)
    at /Users/callum/code/my-app/node_modules/sapper/dist/dev.js:429:5
    at WatchEmitter.<anonymous> (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:884:6)
    at WatchEmitter.emit (events.js:315:20)
    at Watcher.emit (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:611:22)
    at Watcher.run (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:649:18)
(node:31772) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:31772) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:31772) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tslib/tslib.es6.js' from '/Users/callum/code/my-app/node_modules/@rollup/plugin-typescript/dist'
    at /Users/callum/code/my-app/node_modules/resolve/lib/async.js:115:35
    at processDirs (/Users/callum/code/my-app/node_modules/resolve/lib/async.js:268:39)
    at isdir (/Users/callum/code/my-app/node_modules/resolve/lib/async.js:275:32)
    at /Users/callum/code/my-app/node_modules/resolve/lib/async.js:25:69
    at FSReqCallback.oncomplete (fs.js:171:21)
(node:31772) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:31772) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tslib/tslib.es6.js' from '/Users/callum/code/my-app/node_modules/@rollup/plugin-typescript/dist'
    at /Users/callum/code/my-app/node_modules/resolve/lib/async.js:115:35
    at processDirs (/Users/callum/code/my-app/node_modules/resolve/lib/async.js:268:39)
    at isdir (/Users/callum/code/my-app/node_modules/resolve/lib/async.js:275:32)
    at /Users/callum/code/my-app/node_modules/resolve/lib/async.js:25:69
    at FSReqCallback.oncomplete (fs.js:171:21)
(node:31772) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
^C

I also just noticed this part in the stack trace:

Error: Cannot find module 'tslib/tslib.es6.js' from '/Users/callum/code/my-app/node_modules/@rollup/plugin-typescript/dist'

...so I tried rm -rf node_modules && yarn, but the problem remains.

callumlocke commented

(Also just tried rm -rf node_modules && npm i, in case it's a problem with how yarn installs things, but I still get the same errors when I do npm run dev.)

pngwn commented

Try installing tslib. yarn add --dev tslib

callumlocke commented

OK, installed tslib, and the stack trace no longer complains about that. But it still has the Could not find chunk that owns index.svelte error:

> sapper dev

✗ server
@rollup/plugin-typescript: Couldn't process compiler options
✗ client
@rollup/plugin-typescript: Couldn't process compiler options
(node:33203) UnhandledPromiseRejectionWarning: Error: Could not find chunk that owns index.svelte
    at /Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:570:10
    at Array.forEach (<anonymous>)
    at extract_css (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:564:13)
    at RollupResult.to_json (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:752:9)
    at handle_result (/Users/callum/code/my-app/node_modules/sapper/dist/dev.js:335:28)
    at /Users/callum/code/my-app/node_modules/sapper/dist/dev.js:429:5
    at WatchEmitter.<anonymous> (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:884:6)
    at WatchEmitter.emit (events.js:315:20)
    at Watcher.emit (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:611:22)
    at Watcher.run (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:649:18)
(node:33203) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:33203) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
^C
benmccann commented

The "Could not find chunk that owns index.svelte" seems like a duplicate of #1334 though they're not using Typescript in that example. Do you get the error without using Typescript? If you message me on Discord (my username is the same there), I can help you debug in realtime

benmccann commented

I talked to @callumlocke on Discord and we found that renderChunk is never being called for him:

sapper/src/core/create_compilers/RollupCompiler.ts

Line 38 in 24e7dd1

renderChunk: (code: string, chunk: any) => {

At this point, it's pretty clear it's not a bug in Sapper because Sapper's code is never being called. It's got to be some issue with Rollup or one of its plugins or configuration, but I'm less familiar with those code bases. I would focus on the Couldn't process compiler options error as I think that's the root cause

babichjacob commented

If this is useless, I'm sorry:

First, I always have @rollup/plugin-typescript listed as a plugin after CommonJS and more importantly after Svelte.

Another thing—one reason Couldn't process compiler options happens, if I remember correctly, is if there are no .ts files in your src directory. Try making a purposeless server route like src/routes/example.ts with this content:

import type { Request as ExpressRequest, Response as ExpressResponse } from "express";

export const get = async (req: ExpressRequest, res: ExpressResponse): Promise<void> => {
	res.end("you made a get request");
};

export const post = async (req: ExpressRequest, res: ExpressResponse): Promise<void> => {
	res.end("you made a post request");
};

(if you need to install express and @types/express for this to work, do so — this probably doesn't require switching from Polka to Express in server.ts, but if it does, then try that too).

callumlocke commented

@babichjacob thanks for the suggestions, but I still get the same error. I had already moved the typescript plugin to after commonjs. And I just tried adding that example.ts route as you suggested, but still no luck.

Edit: actually, the stack trace is different now, although it still includes the same Could not find chunk that owns index.svelte message. What's new is @rollup/plugin-typescript TS2688: Cannot find type definition file for '@sapper'. I guess that's encouraging? Still though, the 'chunks' array is empty (which @benmccann asked me to console.log from sapper's create_manifest_data.js file in my node_modules, just before the "Could not find chunk" error is thrown.)

> sapper dev

'default' is imported from external module 'svelte-preprocess' but never used
✗ server
@rollup/plugin-typescript TS2688: Cannot find type definition file for '@sapper'.
✗ client
@rollup/plugin-typescript TS2688: Cannot find type definition file for '@sapper'.
resolved: /Users/callum/code/my-app/src/routes/index.svelte
chunks: []
(node:51758) UnhandledPromiseRejectionWarning: Error: Could not find chunk that owns index.svelte
    at /Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:572:10
    at Array.forEach (<anonymous>)
    at extract_css (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:564:13)
    at RollupResult.to_json (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:754:9)
    at handle_result (/Users/callum/code/my-app/node_modules/sapper/dist/dev.js:335:28)
    at /Users/callum/code/my-app/node_modules/sapper/dist/dev.js:429:5
    at WatchEmitter.<anonymous> (/Users/callum/code/my-app/node_modules/sapper/dist/create_manifest_data.js:888:6)
    at WatchEmitter.emit (events.js:314:20)
    at Watcher.emit (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:611:22)
    at Watcher.run (/Users/callum/code/my-app/node_modules/rollup/dist/shared/watch.js:649:18)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:51758) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:51758) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
^C
babichjacob commented

I actually, just now, got this exact error after upgrading to 0.28 (which did not cause the error, by the way), making some changes (which exact one caused it, I don't know), then fixed it by resolving all the TypeScript errors as they were revealed to me in the console.

(That mainly meant replacing all the type-only imports with import type).

maiksch commented

I also had the problem (node:23532) UnhandledPromiseRejectionWarning: Error: Could not find chunk that owns index.svelte on a small project that I migrated to Typescript. The cause was a "module": "CommonJS" in the tsconfig.json that I added and forgot about. It worked after I removed that.

kairauer commented

I'm having the exact same issue after creating a new Sapper project based on the default template + following the steps described in the "Svelte <3 TypeScript" article.
I was able to solve the issue by changing the following:

  • Change src/client.js and src/server.js to .ts files
  • Create typings/@sapper directory in the root directory and add a index.d.ts file with the following content:
declare module "@sapper/app";
declare module "@sapper/server";
declare module "@sapper/service-worker";
  • Add types to tsconfig.json - my tsconfig.json:
{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": ["src/**/*", "src/node_modules"],
    "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
    "compilerOptions": {
        "types": ["svelte", "node", "@sapper"],
        "typeRoots": ["typings"]
    }
}
  • Place typescript({ sourceMap: dev }) in both client and server sections below commonjs() - see rollup.config.js below
  • Tell rollup to look for .ts files instead of .js files - see rollup.config.js below
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import commonjs from "@rollup/plugin-commonjs";
import svelte from "rollup-plugin-svelte";
import babel from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
import config from "sapper/config/rollup.js";
import pkg from "./package.json";
import autoPreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";

const mode = process.env.NODE_ENV;
const dev = mode === "development";
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) =>
    (warning.code === "MISSING_EXPORT" && /'preload'/.test(warning.message)) ||
    (warning.code === "CIRCULAR_DEPENDENCY" && /[/\\]@sapper[/\\]/.test(warning.message)) ||
    onwarn(warning);

export default {
    client: {
        input: config.client.input().replace(/\.js$/, ".ts"),
        output: config.client.output(),
        plugins: [
            replace({
                "process.browser": true,
                "process.env.NODE_ENV": JSON.stringify(mode),
            }),
            svelte({
                dev,
                hydratable: true,
                emitCss: true,
                preprocess: autoPreprocess(),
            }),
            resolve({
                browser: true,
                dedupe: ["svelte"],
            }),
            commonjs(),
            typescript({ sourceMap: dev }),
            legacy &&
                babel({
                    extensions: [".js", ".mjs", ".html", ".svelte"],
                    babelHelpers: "runtime",
                    exclude: ["node_modules/@babel/**"],
                    presets: [
                        [
                            "@babel/preset-env",
                            {
                                targets: "> 0.25%, not dead",
                            },
                        ],
                    ],
                    plugins: [
                        "@babel/plugin-syntax-dynamic-import",
                        [
                            "@babel/plugin-transform-runtime",
                            {
                                useESModules: true,
                            },
                        ],
                    ],
                }),
            !dev &&
                terser({
                    module: true,
                }),
        ],
        preserveEntrySignatures: false,
        onwarn,
    },
    server: {
        input: config.server.input().server.replace(/\.js$/, ".ts"),
        output: config.server.output(),
        plugins: [
            replace({
                "process.browser": false,
                "process.env.NODE_ENV": JSON.stringify(mode),
            }),
            svelte({
                generate: "ssr",
                hydratable: true,
                dev,
            }),
            resolve({
                dedupe: ["svelte"],
            }),
            commonjs(),
            typescript({ sourceMap: dev }),
        ],
        external: Object.keys(pkg.dependencies).concat(require("module").builtinModules),
        preserveEntrySignatures: "strict",
        onwarn,
    },
    serviceworker: {
        //..... nothing changed here
    },
};

Everything is working fine as far as I can see.

  • 👍1