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

vfilatov · 2021-08-10T22:31:37Z

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

The text was updated successfully, but these errors were encountered:

benmccann · 2021-08-10T23:01:23Z

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 · 2021-08-10T23:47:54Z

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 · 2021-08-11T04:17:32Z

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 · 2021-08-11T16:05:27Z

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 · 2021-08-11T16:55:54Z

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 · 2021-08-11T17:06:59Z

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 · 2021-08-11T17:25:49Z

A workaround
import icon directly

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

tcoopman · 2021-09-06T13:10:42Z

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 · 2022-04-01T08:55:14Z

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

benmccann · 2022-04-01T12:41:42Z

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

ahmadshiddiqn · 2022-04-13T03:30:36Z

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

vish01 · 2022-06-06T16:22:22Z

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 · 2022-09-01T01:05:02Z

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 · 2022-09-19T12:29:07Z

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

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

ahmadshiddiqn · 2022-09-20T08:38:16Z

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 · 2023-07-30T04:09:33Z

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 · 2023-07-30T04:19:54Z

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

benmccann added vite bug Something isn't working labels Aug 10, 2021

benmccann closed this as completed Aug 10, 2021

benmccann mentioned this issue Aug 10, 2021

Vite prebundling breaks SSR vitejs/vite#4569

Closed

7 tasks

benmccann mentioned this issue Aug 11, 2021

Fix popperjs import for SvelteKit bestguy/sveltestrap#356

Merged

erg mentioned this issue Sep 8, 2021

SyntaxError: Cannot use import statement outside a module after yarn3 #2393

Closed

lovasoa mentioned this issue Apr 1, 2022

Upgrade to Vite 2.9 #4468

Merged

lovasoa mentioned this issue Apr 4, 2022

Cannot use import statement outside a module #4504

Closed

ahmadshiddiqn mentioned this issue Apr 13, 2022

Cannot use import module statement outside a module when importing and using sveltestrap component on sveltekit #4603

Closed

radicleart mentioned this issue Jul 10, 2022

Customisable version of bootstrap is required Clarity-Innovation-Lab/stxeco-svelte#1

Closed

tdecker91 mentioned this issue Jul 25, 2023

"Cannot use import statement outside a module" syntax error from inside puzzle-gen tdecker91/puzzle-gen#4

Closed

pinussilvestrus mentioned this issue Sep 18, 2023

Unable to import modules bpmn-io/form-js#805

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

vfilatov commented Aug 10, 2021 •

edited

Loading

benmccann commented Aug 10, 2021

vfilatov commented Aug 10, 2021 •

edited

Loading

benmccann commented Aug 11, 2021

vfilatov commented Aug 11, 2021 •

edited

Loading

benmccann commented Aug 11, 2021

vfilatov commented Aug 11, 2021 •

edited

Loading

vfilatov commented Aug 11, 2021

tcoopman commented Sep 6, 2021

lovasoa commented Apr 1, 2022

benmccann commented Apr 1, 2022

ahmadshiddiqn commented Apr 13, 2022

vish01 commented Jun 6, 2022

ethanmichel0 commented Sep 1, 2022

benallfree commented Sep 19, 2022

ahmadshiddiqn commented Sep 20, 2022

MattPhantastic commented Jul 30, 2023 •

edited

Loading

ahmadshiddiqn commented Jul 30, 2023

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

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

Comments

vfilatov commented Aug 10, 2021 • edited Loading

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

benmccann commented Aug 10, 2021

vfilatov commented Aug 10, 2021 • edited Loading

benmccann commented Aug 11, 2021

vfilatov commented Aug 11, 2021 • edited Loading

benmccann commented Aug 11, 2021

vfilatov commented Aug 11, 2021 • edited Loading

vfilatov commented Aug 11, 2021

tcoopman commented Sep 6, 2021

lovasoa commented Apr 1, 2022

benmccann commented Apr 1, 2022

ahmadshiddiqn commented Apr 13, 2022

vish01 commented Jun 6, 2022

ethanmichel0 commented Sep 1, 2022

benallfree commented Sep 19, 2022

ahmadshiddiqn commented Sep 20, 2022

MattPhantastic commented Jul 30, 2023 • edited Loading

ahmadshiddiqn commented Jul 30, 2023

vfilatov commented Aug 10, 2021 •

edited

Loading

vfilatov commented Aug 10, 2021 •

edited

Loading

vfilatov commented Aug 11, 2021 •

edited

Loading

vfilatov commented Aug 11, 2021 •

edited

Loading

MattPhantastic commented Jul 30, 2023 •

edited

Loading