sveltejs / sapper-template

Starter template for Sapper apps
703 stars 215 forks source link

Sapper Typescipt, can't spin up dev server #292

Closed danielbotn closed 3 years ago

danielbotn commented 3 years ago

Describe the bug Yesterday I initialized a sapper project with typescript support.

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
node scripts/setupTypeScript.js
npm install
npm run dev

and everything worked fine, but today I can't spin up the dev server Logs

npm run dev

> TODO@0.0.1 dev C:\software_projects\svelte\myApp
> sapper dev

✗ client
Unrecognized option 'preprocess'
✗ server
Unrecognized option 'preprocess'
internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module 'C:\software_projects\svelte\daysWebApp\__sapper__\dev\server\server.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
> Server crashed
✔ service worker (1.7s)

To Reproduce

Expected behavior The development server should start

Stacktraces

Information about your Sapper Installation:

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
node scripts/setupTypeScript.js
npm install
npm run dev

Severity To be able to develop in Typescript is pretty severe to me

Additional context No.

Conduitry commented 3 years ago

Transferring this to the sapper-template repo. Presumably the PR to update to rollup-plugin-svelte@7 that was merged in yesterday didn't update the TypeScript setup script to put the preprocess option in the right place.

Conduitry commented 3 years ago

Yeah, if you remove the preprocess: sveltePreprocess() out of the compilerOptions and into the top-level of the svelte({}) in rollup.config.js (for both the server and the client configurations), this works. Should be an easy fix to the setup script.

danielbotn commented 3 years ago

@Conduitry I did that. Now I am getting a lot of errors. Like the compiler does not understand how to parse Typescript.

C:\software_projects\svelte\myApp>npm run dev

> TODO@0.0.1 dev C:\software_projects\svelte\myApp
> sapper dev

'default' is imported from external module 'svelte-preprocess' but never used
✗ client
src\routes\_layout.svelte
Unexpected token
2:   import Nav from '../components/Nav.svelte';
3:
4:   export let segment: string;
                       ^
5: </script>
6:
✗ server
src\routes\_layout.svelte
Unexpected token
2:   import Nav from '../components/Nav.svelte';
3:
4:   export let segment: string;
                       ^
5: </script>
6:
internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module 'C:\software_projects\svelte\daysWebApp\__sapper__\dev\server\server.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
> Server crashed
✔ service worker (1.7s)

My rollup.config file below:

import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import url from '@rollup/plugin-url';
import svelte from 'rollup-plugin-svelte';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';
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)) ||
    (warning.code === 'THIS_IS_UNDEFINED') ||
    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({
                compilerOptions: {
                    dev,
                    hydratable: true
                }
            }),
            url({
                sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
                publicPath: '/client/'
            }),
            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: { server: config.server.input().server.replace(/\.js$/, ".ts") },
        output: config.server.output(),
        plugins: [
            replace({
                'process.browser': false,
                'process.env.NODE_ENV': JSON.stringify(mode)
            }),
            svelte({
                compilerOptions: {
                    dev,
                    generate: 'ssr',
                    hydratable: true,
                },
                emitCss: false
            }),
            url({
                sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
                publicPath: '/client/',
                emitFiles: false // already emitted by client build
            }),
            resolve({
                dedupe: ['svelte']
            }),
            commonjs(),
            typescript({ sourceMap: dev })
        ],
        external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),

        preserveEntrySignatures: 'strict',
        onwarn,
    },

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

        preserveEntrySignatures: false,
        onwarn,
    }
};
benmccann commented 3 years ago

Your Rollup config looks malformed. I just fixed this. Try creating a project again and hopefully it should work as expected now