Open callumlocke opened 4 years ago
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.
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
@callumlocke if you could provide your config we can check to see if anything is amiss.
@pngwn which config?
Your rollup 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,
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.
You seem to have two preprocess
keys in the client config and none in the server config.
This actually may be because your extra preprocess config is overwriting your postcss config which is causing parsing errors.
You will also need to put that typescript plugin in your server config as well.
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.
(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
.)
Try installing tslib. yarn add --dev tslib
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
The "Could not find chunk that owns index.svelte" seems like a duplicate of https://github.com/sveltejs/sapper/issues/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
I talked to @callumlocke on Discord and we found that renderChunk
is never being called for him:
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
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).
@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
Try adding this file:
And putting it in your tsconfig.json
:
https://github.com/babichjacob/sapper-typescript-graphql-template/blob/main/tsconfig.json#L19
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
).
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.
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:
declare module "@sapper/app";
declare module "@sapper/server";
declare module "@sapper/service-worker";
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*", "src/node_modules"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
"compilerOptions": {
"types": ["svelte", "node", "@sapper"],
"typeRoots": ["typings"]
}
}
typescript({ sourceMap: dev })
in both client and server sections below commonjs()
- 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.
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:
It comes from this code in Sapper's
create_manifest_data.js
: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
npx degit "sveltejs/sapper-template#rollup" my-app
npm run dev
– it launches fine.sourceMap: !production
tosourceMap: 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 (Information about your project:
Your browser and the version: N/A
Your operating system: macOS 10.15 Beta
svelte-preprocess
version: 4.0.10Rollup