svelte: require is undefined: how do you setup?

Hi, new to svelte, trying to switch to svelte, but I’ve got this big barrier, the elephant in the room that is not explained very clearly for beginners in the tutorials: how do you build a svelte component that uses an npm package?

So far, I’ve followed this guide: https://svelte.dev/blog/svelte-for-new-developers, and from there I could make my first rollup config:

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 { sass } from 'svelte-preprocess-sass';
import copy from 'rollup-plugin-copy'




const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	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('public/build/bundle.css');
			},
			preprocess: {
				style: sass(),
			},
		}),

		// 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(),

		// 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(),
		copy({
			targets: [
				{
					src: 'src/assets/*',
					dest: 'public/build/assets',
					flatten: true,

				},
			]
		}),
	],
	watch: {
		clearScreen: false
	}
};

function serve() {
	let started = false;

	return {
		writeBundle() {
			if (!started) {
				started = true;

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

That’s nice, but now if in one of my svelte file I try to add a line like this:

const myvar = require("some-npm-package");

I’ve got this js error (in the browser):

ReferenceError: require is not defined

So my question is: how do you configure rollup to make the npm dependencies (in my svelte files) be bundled?

To me it’s a fundamental topic (as if I can’t configure svelte easily, I probably won’t use svelte at all). Therefore I believe this question should be answered somewhere obvious in the svelte documentation (tutorial, FAQ).

I mean this guide was a good initiative: https://svelte.dev/blog/svelte-for-new-developers, and should be more visible/accessible for svelte newcomers.