kit: SvelteKit v1.0.0-next.146 SyntaxError: Cannot use import statement outside a module

Hey, configuring the option within svelte.config.js is no longer supported as all vite configurations need to go in vite.config.js (when I added const config = { kit: { adapter: adapter(), vite: { ssr: { noExternal: ['@popperjs/core'] } } }, }; It says that config.kit.vite has been removed and to use vite.config.js instead. However when I add the sir configuration to vite.config.js the same issue appears with popper.js. Is there an updated way to resolve this issue?

on vite.config.js, inside the config variable, add something like this:

const config = {
    // ... your other config attribute
    ssr: {
        noExternal: ['@popperjs/core']
    }
}

at least this works for me

Hey, configuring the option within svelte.config.js is no longer supported as all vite configurations need to go in vite.config.js (when I added const config = { kit: { adapter: adapter(), vite: { ssr: { noExternal: ['@popperjs/core'] } } }, }; It says that config.kit.vite has been removed and to use vite.config.js instead. However when I add the sir configuration to vite.config.js the same issue appears with popper.js. Is there an updated way to resolve this issue?

If someone’s still facing this issue after upgrading svelteKit version to 1.0.0-next.348 and if the error says something about popperjs, then I recommend adding the ssr: { noExternal: ['@popperjs/core'] } option inside svelte.config.js as mentioned here. Adding this fixed my issue and made the popperjs error go away. Thanks @Rich-Harris for the workaround!

My vite.config.ts looks like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});

Where do I insert your example, @ahmadshiddiqn? Do I insert ssr: { noExternal: ['@popperjs/core'] } after plugins: [sveltekit()]?

AFAIK, the order doesn’t matter, it would act like a JSON obj. But my vite.config.ts on my other sveltekit project looks something like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	ssr: {
		noExternal: ['@popperjs/core', 'chart.js', 'svelte-select', 'svelte-gantt']
	}
});

My vite.config.ts looks like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});

Where do I insert your example, @ahmadshiddiqn? Do I insert ssr: { noExternal: ['@popperjs/core'] } after plugins: [sveltekit()]?

EDIT: Yep, that seemed to work. Thanks for the tip!

@ethanmichel0 Same issue, but I found this https://github.com/bestguy/sveltestrap/issues/463#issuecomment-1207351497 works.

Add "type": "module" to node_modules/@popperjs/core/package.json

I have the same issue when I start a new demo project. The error: Cannot use import statement outside a module in vscode.

create-svelte version 2.0.0-next.78

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

If you encounter a problem, open an issue on https://github.com/sveltejs/kit/issues if none exists already.

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? … No / Yes
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Copied project files
✔ Added TypeScript support. To use it inside Svelte components, add lang="ts" to the attributes of a script tag.
✔ Added ESLint.
Readme for ESLint and Svelte: https://github.com/sveltejs/eslint-plugin-svelte3
✔ Added Prettier.
General formatting options: https://prettier.io/docs/en/options.html
Svelte-specific formatting options: https://github.com/sveltejs/prettier-plugin-svelte#options

Want to add other parts to your code base? Visit https://github.com/svelte-add/svelte-adders, a community project of commands to add particular functionality to Svelte projects


Next steps:
  1: cd test-bug
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional step)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

And here is the repo that has the problem: https://github.com/tcoopman/sveltekit-repro-bug-vscode

To be clear, npm run dev doesn’t give any issues, but the problems show in vscode with Svelte for VS Code.