Brief Background
- I want to make a Visual Studio Code extension that has webviews
- I wanted to use Svelte/Typescript to make the webviews, Typescript to make the extension itself
- This has led me to an unusual project structure, where I use esbuild to build the extension, rollup to build the webviews, and use separate tsconfig.json for webviews compared to the extension
What's Wrong?
I keep getting a parsing error when trying to do the webview rollup build:
src/webviews/pages/LogViewerPage.ts → out/compiled/LogViewerPage.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/core/LogData/LogData.ts (1:12)
1: import type { ILogData } from "./ILogData";
^
2:
3: export class LogData implements ILogData {
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (C:\...\node_modules\rollup\dist\shared\rollup.js:198:30)
at Module.error (C:\...\node_modules\rollup\dist\shared\rollup.js:12560:16)
at Module.tryParse (C:\...\node_modules\rollup\dist\shared\rollup.js:12937:25)
at Module.setSource (C:\...\node_modules\rollup\dist\shared\rollup.js:12842:24)
at ModuleLoader.addModuleSource (C:\...\node_modules\rollup\dist\shared\rollup.js:22291:20)
Context?
Example repo here: https://github.com/svew/svelte-typescript-headache/tree/master
src/core/LogData/LogData.ts:
import type { ILogData } from "./ILogData";
export class LogData implements ILogData {
private _name: string;
constructor (name: string) {
this._name = name;
}
get name(): string {
return this._name;
}
}
src/webviews/components/LogViewer.svelte:
<script lang="ts">
import { onMount } from 'svelte';
import { LogData } from "@core/LogData";
let logData: LogData | undefined;
onMount(() => {
logData = new LogData("MyLogData");
});
</script>
<body>
{#if logData}
<p>{logData.name}</p>
{/if}
</body>
src/webviews/tsconfig.json:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": [
"./**/*",
],
"exclude": [
"node_modules/*",
],
"compilerOptions": {
"strict": true,
"rootDir": "../",
"baseUrl": "../",
"paths": {
"@core/*": [
"./core/*",
],
"@webviews/*": [
"./webviews/*",
],
},
"types": [
"node",
"svelte",
],
}
}
rollup.config.js:
import svelte from 'rollup-plugin-svelte';
import nodeResolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import typescript from "@rollup/plugin-typescript";
import css from 'rollup-plugin-css-only';
import sveltePreprocess from "svelte-preprocess";
const production = process.argv.includes("prod");
const plugins = [
svelte({
//include: 'src/webviews/**/*.svelte',
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
preprocess: sveltePreprocess(),
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
typescript({
tsconfig: "src/webviews/tsconfig.json",
sourceMap: !production,
inlineSources: !production,
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
nodeResolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
];
const pageName = "LogViewerPage";
export default {
//input: "src/extension.ts",
input: "src/webviews/pages/" + pageName + ".ts",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "out/compiled/" + pageName + ".js",
},
plugins: plugins,
watch: {
clearScreen: false,
},
};
What I Have Tried:
- Modifying tsoncifg rootDir/baseUrl
- Modifying rollup.config.js's sveltePreprocessor arguments, especially the typescript args
- Modifying rollup.config.js's typescript plugin's arguments
- Updating to latest packages
Very stumped how to fix this