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

[vfilatov]

Describe the bug

After upgrade to SvelteKit v1.0.0-next.146 (from 144)
Getting the error in both dev & prod

Reproduction

cd /tmp
npm init svelte@next ttt
all defaults

cd ttt
rm -rf src/routes/*
npm install
npm install sveltestrap @sveltejs/adapter-node@next

src/routes/index.svelte:

<script>
  import Button from 'sveltestrap/src/Button.svelte';
  import Popover from 'sveltestrap/src/Popover.svelte';

  const placements = ['top', 'right', 'left', 'bottom'];
</script>

{#each placements as placement}
  <div class="mt-3">
    <Button id={`btn-${placement}`}>Click for {placement}</Button>
    <Popover
      target={`btn-${placement}`}
      {placement}
      title={`Popover ${placement}`}
    >
      This is a Popover on the {placement} of the trigger.
    </Popover>
  </div>
{/each}

svelte.config.js:

import node from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
        kit: {
          adapter: node({
            out: 'build',
          }),
          // hydrate the <div id="svelte"> element in src/app.html
          target: '#svelte'
        }
};

export default config;

Logs

6:22:04 PM [vite] Error when evaluating SSR module /node_modules/sveltestrap/src/Popover.svelte:
/tmp/ttt/node_modules/@popperjs/core/dist/esm/popper.js:1
import { popperGenerator, detectOverflow } from "./createPopper.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at nodeRequire (/tmp/ttt/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:73479:17)
    at ssrImport (/tmp/ttt/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:73431:20)
    at eval (/node_modules/sveltestrap/src/Popover.svelte:9:31)

in prod

> Using @sveltejs/adapter-node
> Cannot find module '/tmp/ttt/node_modules/@popperjs/core/dist/esm/popper' imported from /tmp/ttt/.svelte-kit/output/server/app.js
Did you mean to import @popperjs/core/dist/esm/popper.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/tmp/ttt/node_modules/@popperjs/core/dist/esm/popper' imported from /tmp/ttt/.svelte-kit/output/server/app.js
Did you mean to import @popperjs/core/dist/esm/popper.js?
    at finalizeResolution (internal/modules/esm/resolve.js:285:11)
    at moduleResolve (internal/modules/esm/resolve.js:708:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:819:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:73:40)
    at link (internal/modules/esm/module_job.js:72:36)

System Info

System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 19.67 GB / 31.23 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 14.17.4 - /usr/bin/node
    npm: 6.14.14 - /usr/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Firefox: 90.0.2
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.39 => 1.0.0-next.39 
    @sveltejs/kit: next => 1.0.0-next.146 
    svelte: ^3.34.0 => 3.42.1

Severity

blocking an upgrade

Additional Information

It works fine in SvelteKit v1.0.0-next.144

[benmccann]

Thank you for the report! I will file an issue with Vite and try to figure out what's going on.

In the meantime you can work around this and go back to the old behavior with:

kit: {
    ...
    vite: {
      optimizeDeps: {
        entries: []
      }
    }
}

Next time could you add the reproduction to a git repo? 😉

[vfilatov]

In the meantime you can work around this and go back to the old behavior with:

kit: {
    ...
    vite: {
      optimizeDeps: {
        entries: []
      }
    }
}

That workaround fixed the error above but there is another fatal error in the browser in my (big) project.

Sorry, I cannot re-produce it in a small example.

Production build work fine though.

PS. I will stay with 144 for a while...
Thanks for your prompt action!

[benmccann]

That turned out to be caused by Sveltestrap. I sent a fix here: bestguy/sveltestrap#356

Please do try to find a way to reproduce the other error you're having or some way to share with me. The code isn't going back to the way it was 😄 So otherwise you'll be stuck on an old version forever...

[vfilatov]

That turned out to be caused by Sveltestrap. I sent a fix here: bestguy/sveltestrap#356

Please do try to find a way to reproduce the other error you're having or some way to share with me. The code isn't going back to the way it was smile So otherwise you'll be stuck on an old version forever...

I think I found it
Here is the repo with minimal code
https://github.com/vfilatov/SvelteKit-2161

in short this is the code __layout.svelte

<script>
  import Icon from 'svelte-awesome';
  import { spinner as mySpinner} from 'svelte-awesome/icons';
</script>

<h1>Header</h1>
<hr />
<slot />

[benmccann]

I just did npm install and npm run dev with that repo and don't see any issue. Is there something specific I should be looking for or maybe it doesn't reproduce it?

[vfilatov]

I just did npm install and npm run dev with that repo and don't see any issue. Is there something specific I should be looking for or maybe it doesn't reproduce it?

Sorry, I didn't mention it,
you might want to check devTools console output.
or rename __layout.svelte to index.svelte

PS. I renamed it in repo that you can see the error in browser

[vfilatov]

A workaround
import icon directly

import mySpinner from 'svelte-awesome/icons/spinner.js';

[tcoopman]

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.

[lovasoa]

@benmccann I am seeing this error again after updating to 1.0.0-next.304

[benmccann]

@lovasoa can you file a new issue with a reproduction? I don't have a way to reproduce and investigate at the moment

[ahmadshiddiqn]

@benmccann sorry for issue hijacking, but this happens to me too. this is my open issue #4603 thank you

[vish01]

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!

[ethanmichel0]

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?

[benallfree]

@ethanmichel0 Same issue, but I found this bestguy/sveltestrap#463 (comment) works.

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

[ahmadshiddiqn]

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

[MattPhantastic]

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!

[ahmadshiddiqn]

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']
	}
});