Sapper : what I did wrong ?

I started new sapper project

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install

Add mdsvex

npm i -D mdsvex

in rollup config

import { mdsvex } from "mdsvex";

and in svelte part add

extensions: [".svx",".svelte"],
		preprocess: mdsvex(),

so the rollup config becomes

import { mdsvex } from "mdsvex";
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';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);

export default {
	client: {
		input: config.client.input(),
		output: config.client.output(),
		plugins: [
			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			svelte({
				dev,
				hydratable: true,
				emitCss: true,
				extensions: [".svx", ".svelte"],
				preprocess: mdsvex(),
			}),
			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',
				dev,
				extensions: [".svx", ".svelte"],
				preprocess: mdsvex(),
			}),
			resolve({
				dedupe: ['svelte']
			}),
			commonjs()
		],
		external: Object.keys(pkg.dependencies).concat(
			require('module').builtinModules || Object.keys(process.binding('natives'))
		),

		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,
	}
};

Create file test.svx inside routes

# Test

npm run dev

go to localhost:3000/test and 404

Then edit package.json change dev to

"dev": "sapper dev --ext '.svelte .svx'",

npm run dev again

error appears

> sapper dev --ext '.svelte .svx'

Entry module "rollup.config.js" is implicitly using "default" export mode, which means for CommonJS output that its default export is assigned to "module.exports". For many tools, such CommonJS output will not be interchangeable with the original ES module. If this is intended, explicitly set "output.exports" to either "auto" or "default", otherwise you might want to consider changing the signature of "rollup.config.js" to use named exports only.
• client
D:\svelteprojects\my-app\src\node_modules\@sapper\internal\App.svelte
'level' is not defined
22:     <Error {error} {status}/>
23:   {:else}
24:     <svelte:component this="{level-Infinity.component}" {...level-Infinity.props}/>
                                 ^
25:   {/if}
26: </Layout>
D:\svelteprojects\my-app\src\node_modules\@sapper\internal\App.svelte
'level' is not defined
22:     <Error {error} {status}/>
23:   {:else}
24:     <svelte:component this="{level-Infinity.component}" {...level-Infinity.props}/>
                                                                ^
25:   {/if}
26: </Layout>
• server
D:\svelteprojects\my-app\src\node_modules\@sapper\internal\App.svelte
'level' is not defined
22:     <Error {error} {status}/>
23:   {:else}
24:     <svelte:component this="{level-Infinity.component}" {...level-Infinity.props}/>
                                 ^
25:   {/if}
26: </Layout>
D:\svelteprojects\my-app\src\node_modules\@sapper\internal\App.svelte
'level' is not defined
22:     <Error {error} {status}/>
23:   {:else}
24:     <svelte:component this="{level-Infinity.component}" {...level-Infinity.props}/>
                                                                ^
25:   {/if}
26: </Layout>
✔ service worker (69ms)
> Listening on http://localhost:3000

How can I fix this ?

Thanks

[TheComputerM]

Try to change the npm command to:

"dev": "sapper dev --ext \".svelte .svx\""

[pngwn]

Just got a new issue that might be the same as this one. I’ll address this soon.