npm run build fails after setting up typescript

[drmason13]

I am trying to setup typescript in a docker container based on this template using vscode.

I'm admittedly new to typescript but keep stumbling on this error both when running setupTypeScript.js and trying to setup typescript manually using the instructions here: https://svelte.dev/blog/svelte-and-typescript

The error is:

Error: Cannot find module '@rollup/plugin-typescript'

full output of `npm run build`

# npm run build

> svelte-app@1.0.0 build /workspaces/hello-svelte
> rollup -c

[!] Error: Cannot find module '@rollup/plugin-typescript'
Require stack:
- /workspaces/hello-svelte/rollup.config.js
- /workspaces/hello-svelte/node_modules/rollup/dist/shared/loadConfigFile.js
- /workspaces/hello-svelte/node_modules/rollup/dist/bin/rollup
Error: Cannot find module '@rollup/plugin-typescript'
Require stack:
- /workspaces/hello-svelte/rollup.config.js
- /workspaces/hello-svelte/node_modules/rollup/dist/shared/loadConfigFile.js
- /workspaces/hello-svelte/node_modules/rollup/dist/bin/rollup
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1080:15)
    at Function.Module._load (internal/modules/cjs/loader.js:923:27)
    at Module.require (internal/modules/cjs/loader.js:1140:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (/workspaces/hello-svelte/rollup.config.js:11:18)
    at Module._compile (internal/modules/cjs/loader.js:1251:30)
    at Object.require.extensions.<computed> [as .js] (/workspaces/hello-svelte/node_modules/rollup/dist/shared/loadConfigFile.js:508:20)
    at Module.load (internal/modules/cjs/loader.js:1100:32)
    at Function.Module._load (internal/modules/cjs/loader.js:962:14)
    at Module.require (internal/modules/cjs/loader.js:1140:19)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! svelte-app@1.0.0 build: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the svelte-app@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-08-28T08_57_10_635Z-debug.log

The relevant part of the rollup config is probably the include, which looks fine to me:

import typescript from '@rollup/plugin-typescript';

This was generated by the setupTypeScript script.

rollup.config.js

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;
	
	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.ts',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			// enable run-time checks when not in production
			dev: !production,
			// we'll extract any component CSS out into
			// a separate file - better for performance
			css: css => {
				css.write('bundle.css');
			},
			preprocess: sveltePreprocess(),
		}),

		// 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
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		typescript({ sourceMap: !production }),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		!production && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

I would appreciate any help with this, I'm not sure if it's me or the template.

[dummdidumm]

If using the template with the script, did you run npm install afterwards? If you set it up manually later on, did you add @rollup/plugin-typescript to your package.json and install it?

[drmason13]

Whelp, that's embarassing!
This did resolve the issue. I think during the confusion of switching from the manual install to the script I rebuilt the container and didn't realise an npm install was needed after the script. Thank you so much :)