Error when evaluating SSR module /node_modules/sveltestrap/src/popper.js

[skrenes]

I have a SvelteKit project and I recently started getting this error:

(node:36) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
2:19:03 PM [vite] Error when evaluating SSR module /node_modules/sveltestrap/src/popper.js:
/home/node/app/node_modules/@popperjs/core/dist/esm/popper.js:1
import { popperGenerator, detectOverflow } from "./createPopper.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1027:15)
    at Module._compile (node:internal/modules/cjs/loader:1063:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
2:19:03 PM [vite] Error when evaluating SSR module /node_modules/sveltestrap/src/Dropdown.svelte:
/home/node/app/node_modules/@popperjs/core/dist/esm/popper.js:1
import { popperGenerator, detectOverflow } from "./createPopper.js";
^^^^^^

I thought Sveltestrap didn't include any external JS. As additional information, devDependencies includes "bootstrap": "^5.1.3", "sveltestrap": "^5.9.0", and "sass": "^1.49.9". Styles are imported in __layout.svelte with:

<style lang="scss" global>
  @import '../app.scss';
</style>

app.scss has the following line:

@import 'bootstrap/scss/bootstrap';

I'm not sure if this setup has anything to do with this error, but I thought more context is better than less. Thanks in advance for your assistance!

[skrenes]

This seems to be an issue with Sveltestrap since this conflicts with the description of Sveltestrap:

This library was inspired by the reactstrap library for React. This does not depend on jQuery or Bootstrap's JavaScript, and instead uses Svelte.

Here's what I'm seeing in node_modules:

node_modules/sveltestrap/src/toggle.js
node_modules/sveltestrap/src/popper.js
node_modules/sveltestrap/src/index.js
node_modules/sveltestrap/src/DropdownContext.js
node_modules/sveltestrap/src/utils.js
node_modules/sveltestrap/src/transitions.js

[nstuyvesant]

While I can build my website without errors, I get the same error when I npm run dev then open my website. I test against the latest LTS of node and SvelteKit.

(node:10434) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
5:48:55 PM [vite] Error when evaluating SSR module /node_modules/sveltestrap/src/popper.js:
/Users/nates/dev/shy-svelte/node_modules/@popperjs/core/dist/esm/popper.js:1
import { popperGenerator, detectOverflow } from "./createPopper.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
5:48:55 PM [vite] Error when evaluating SSR module /node_modules/sveltestrap/src/Dropdown.svelte:
/Users/nates/dev/shy-svelte/node_modules/@popperjs/core/dist/esm/popper.js:1
import { popperGenerator, detectOverflow } from "./createPopper.js";
^^^^^^

  System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.21 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 99.0.4844.74
    Firefox: 97.0
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.73 
    @sveltejs/kit: next => 1.0.0-next.301 
    bootstrap: ^5.1.3 => 5.1.3 
    svelte: ^3.46.4 => 3.46.4 
    sveltestrap: ^5.9.0 => 5.9.0

[nstuyvesant]

If I add:

  "type": "module",

to @popperjs/core/package.json, I can run without errors. So sveltestrap imports the ESM version of popper but because its package.json is generic and the ESM files do not end in .mjs, we get the error.

[nstuyvesant]

One suggestion... perhaps replace @popperjs/core with the latest version (now called @floating-ui/dom? The new library has type module in its package.json and the project has gone through a lot of cleanup.

[kbsali]

same issue here!

[begonaalvarezd]

same issue here 🙏🏼

[bato3]

For SvelteKit npm run build & preview all works OK, but errors are shown in dev: npm run dev

Cannot use import statement outside a module

And this error occurred to me once, but I can't get it back.

<Dropdown> is not a valid SSR component. You may need to review your 
build config to ensure that dependencies are compiled, 
rather than imported as pre-compiled modules

[kbsali]

wouldn't #356 fix that issue? @bestguy anyway this PR could be merged? :pray:

[bato3]

wouldn't https://github.com/bestguy/sveltestrap/pull/356 fix that issue?

1. missing https://github.com/bestguy/sveltestrap/blob/master/src/Tooltip.svelte#L3, https://github.com/bestguy/sveltestrap/blob/master/src/popper.js#L1
2. Probably not. Or i'm doing something wrong during npm run dist in node_modules\sveltestrap

After change in popper.js, Tooltip.svelte, Popover.svelte - works

[bato3]

@bestguy is possible to update deps?

popper@v2.10.0 benmccann fix modules export @2.11.0 svg support

[kbsali]

@bato3 have you considered forking and using your fork instead? It looks like the repo is not very active atm :/

[jtlapp]

I'm also getting this error in SvelteKit. Ping @bestguy. I'd love a fix, updating the above dependencies.

[ynshung]

A current workaround that I used is using the fork by laxadev. It's working fine without any errors and it can be installed by running npm i git+https://github.com/laxadev/sveltestrap.git.

[kbsali]

ah nice! I made my own fork integrating some of the PRs of this repo yet to be merged but I'll give @laxadev 's fork a try. Thanks @ynshung

[king612]

I'm having the same issue. Really don't want to build a Svelte app with Sveltestrap. Have posted both there and on popper github.

[HeyAvi]

If I add:

  "type": "module",

to @popperjs/core/package.json, I can run without errors. So sveltestrap imports the ESM version of popper but because its package.json is generic and the ESM files do not end in .mjs, we get the error.

This helped me get rid of the error

[king612]

Yes, but that's a temporary hack that has to be manually made on each new deployment. Somewhere in the Svelte => Sveltestrap => popper this needs to get cleaned up.

[nstuyvesant]

As @popperjs/core is being superseded by @floating-ui/dom, the only option I see is for sveltestrap to replace it with @floating-ui.

[bluepuma77]

Dear @bestguy, can you please provide a quick statement if you will support SvelteKit short-term?

It seems an update "Popper is now Floating UI!" should easily solve the issue.

It's fine if you have no interest in this, but please let us know so we can then look for an alternative. Thanks!

[ricardasjak]

Same issue here

[kbsali]

@bato3, @bluepuma77, @HeyAvi, @jtlapp, @king612, @laxadev, @nstuyvesant, @skrenes , @ynshung I really hope @bestguy is ok :pray:.

The "situation" is not evolving and it's been almost 2 months since the last commit on this repo. I think we should "agree" on choosing an "official" fork for us to use. Any volunteer? :grimacing: Or which of the current 150+ forks could be a good candidate? I think it is time to take a decision, but organizing this through github issues is probably not ideal. Maybe we could use Svelte's discord to discuss this? What's your take on all this?

Thanks.

[laxadev]

@bato3, @bluepuma77, @HeyAvi, @jtlapp, @king612, @laxadev, @nstuyvesant, @skrenes , @ynshung I really hope @bestguy is ok 🙏.

The "situation" is not evolving and it's been almost 2 months since the last commit on this repo. I think we should "agree" on choosing an "official" fork for us to use. Any volunteer? 😬 Or which of the current 150+ forks could be a good candidate? I think it is time to take a decision, but organizing this through github issues is probably not ideal. Maybe we could use Svelte's discord to discuss this? What's your take on all this?

Thanks.

Yes, let's hope everything is OK with @bestguy

I only fixed this issue on my fork but I'm not planning to maintain/fix any other problems there. So, yes. It would be good to find someone who is going to keep updating/fixing this repo. For me, discord is fine to continue this discussion or whatever anyone else prefers. I hope there is someone who will keep this alive. 🙏

[skrenes]

I too hope that @bestguy is okay. I wish I could commit to supporting a fork, but I'm overwhelmed this year. These last couple months, I've been getting by thanks to the suggestion from @nstuyvesant. I've made it convenient by using sed that basically checks if the version is still 2.11.5 and then adds the module type to package.json. It's such a bandaid :/

sed -i '/2\.11\.5/a \ \ "type": "module",' node_modules/@popperjs/core/package.json

[lovasoa]

The issue can be worked around by adding the following to vite.config.js

    ssr: { noExternal: ['@popperjs/core'] }

[sbamniya]

The issue can be worked around by adding the following to vite.config.js

    ssr: { noExternal: ['@popperjs/core'] }

this doesn't work. only way to remove it is to add type: "module" in the package.json of the @properjs/core/

[rrrfffrrr]

Another temporal option with SPA mode https://github.com/sveltejs/kit/tree/master/packages/adapter-static#spa-mode

[MrVauxs]

As someone starting with Svelte and SvelteKit alongside it, what can someone do about this? Is the only solution really just manually adding the type: module to the package.json / using someone elses repo who did that already?

[jtlapp]

@MrVauxs, over the course of developing an app with SvelteStrap, I encountered problem after problem, working at length to resolve each. When the problems were finally gone, so was SvelteStrap. Reddit is full of similar stories. I suspect you have to abide by some rigid coding philosophy to successfully build with SvelteStrap, but I was unable to figure out what that philosophy is. I ended up building my own components from vanilla bootstrap.

[MrVauxs]

That's what I am slowly realising, especially since even with a working copy of sveltestrap, I can't do any customization like, say, on:mouseover buttons that I could do with simple html.

Good thing I just started. Only one file to rewrite.

[cbudtz]

As someone starting with Svelte and SvelteKit alongside it, what can someone do about this? Is the only solution really just manually adding the type: module to the package.json / using someone elses repo who did that already?

Update your vite.config.js - add ssr-block :

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    },
    ssr: {
        noExternal: ['@popperjs/core']
    }
});