ESM/CJS conflict when importing Sveltestrap components

[MattPhantastic]

I have created a SvelteKit project using pnpm create svelte

Recently I ran a pnpm update. Now, whenever I import Sveltestrap components, my site crashes and says there's a conflict between ESM and CJS.

[vite] Error when evaluating SSR module /src/routes/(logged out)/signup/+page.svelte: failed to import "/node_modules/.pnpm/sveltestrap@5.10.0_svelte@4.1.1/node_modules/sveltestrap/src/index.js"
|- /Users/.../node_modules/.pnpm/@popperjs+core@2.11.8/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:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1048:15)
    at Module._compile (node:internal/modules/cjs/loader:1083:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:527:24)

Internal server error: Cannot use import statement outside a module
      at Object.compileFunction (node:vm:360:18)
      at wrapSafe (node:internal/modules/cjs/loader:1048:15)
      at Module._compile (node:internal/modules/cjs/loader:1083:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
      at Module.load (node:internal/modules/cjs/loader:997:32)
      at Module._load (node:internal/modules/cjs/loader:838:12)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
      at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
      at async Promise.all (index 0)
      at async ESMLoader.import (node:internal/modules/esm/loader:527:24)

I also noticed when running pnpm install sveltestrap that the peer Svelte version is unmet:

Already up to date
Progress: resolved 242, reused 221, downloaded 0, added 0, done
 WARN  Issues with peer dependencies found
.
└─┬ sveltestrap 5.10.0
  └── ✕ unmet peer svelte@^3.29.0: found 4.1.1

Is Sveltestrap not yet compatible with Svelte 4? — How soon can this issue be resolved?

---

EDIT: I tried downgrading.

First I tried pnpm install svelte@3.29.0:

Packages: +11 -25
+++++++++++-------------------------
Progress: resolved 228, reused 206, downloaded 1, added 11, done
node_modules/.pnpm/svelte-preprocess@5.0.4_postcss@8.4.27_svelte@3.29.0_typescript@5.1.6/node_modules/svelte-preprocess: Running postinstall script, done in 78ms
node_modules/.pnpm/@sveltejs+kit@1.22.3_svelte@3.29.0_vite@4.4.7/node_modules/@sveltejs/kit: Running postinstall script, done in 2.6s

devDependencies:
- svelte 4.1.1
+ svelte 3.29.0 (4.1.1 is available)

 WARN  Issues with peer dependencies found
.
├─┬ @sveltejs/kit 1.22.3
│ ├── ✕ unmet peer svelte@"^3.54.0 || ^4.0.0-next.0": found 3.29.0
│ └─┬ @sveltejs/vite-plugin-svelte 2.4.3
│   ├── ✕ unmet peer svelte@"^3.54.0 || ^4.0.0": found 3.29.0
│   └─┬ @sveltejs/vite-plugin-svelte-inspector 1.0.3
│     └── ✕ unmet peer svelte@"^3.54.0 || ^4.0.0": found 3.29.0
├─┬ eslint-plugin-svelte 2.32.4
│ ├── ✕ unmet peer svelte@"^3.37.0 || ^4.0.0": found 3.29.0
│ └─┬ svelte-eslint-parser 0.32.2
│   └── ✕ unmet peer svelte@"^3.37.0 || ^4.0.0": found 3.29.0
└─┬ svelte-check 3.4.6
  └── ✕ unmet peer svelte@"^3.55.0 || ^4.0.0-next.0 || ^4.0.0": found 3.29.0

Done in 10.8s

Then I realised how many other dependencies I also had to also downgrade, and so I decided to just try pnpm install svelte@3.55.0:

Packages: +11 -11
+++++++++++-----------
Progress: resolved 228, reused 206, downloaded 1, added 11, done
node_modules/.pnpm/svelte-preprocess@5.0.4_postcss@8.4.27_svelte@3.55.0_typescript@5.1.6/node_modules/svelte-preprocess: Running postinstall script, done in 100ms
node_modules/.pnpm/@sveltejs+kit@1.22.3_svelte@3.55.0_vite@4.4.7/node_modules/@sveltejs/kit: Running postinstall script, done in 3.1s

devDependencies:
- svelte 3.29.0
+ svelte 3.55.0 (4.1.1 is available)

Done in 11.2s

Nothing seemed 'unmet' this time. Yet the site still crashes with the same ESM/CJS conflict. What gives?

[MattPhantastic]

I have recently discovered that this issue has already been heavily discussed in other threads. Feel free to just delete this thread if you see it… I'll follow the existing threads. 😅

[bestguy]

Hi @MattPhantastic please try with latest release (5.11.1) and let me know if you still see issues. Please close if resolved.

[benmccann]

It is broken on 5.11.1, but I've sent a fix: https://github.com/bestguy/sveltestrap/pull/566

[bestguy]

Hi folks, please confirm this is resolved with v5.11.2