Issue with reduxtool kit and adapter-static to build SSG

[Linh2196]

Describe the bug

it works on SSR and CSR, but SSG doesn't, when I config to build SSG, it logs errors about reduxtoolkit

TypeError: configureStore is not a function
at file:///.../my-app/.svelte-kit/output/server/entries/pages/_layout.svelte.js:41:15
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:533:24)
at async Module.component (file:///my-app/.svelte-kit/output/server/nodes/0.js:4:39)
at async Promise.all (index 0)
at async render_response (file://.../my-app/.svelte-kit/output/server/index.js:1218:19)
at async render_page (file://.../my-app/.svelte-kit/output/server/index.js:1676:12)
at async resolve (file://.../my-app/.svelte-kit/output/server/index.js:1981:22)
at async respond (file://.../my-app/.svelte-kit/output/server/index.js:2019:22)

[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
at ChildProcess. (file:///.../my-app/node_modules/@sveltejs/kit/src/exports/vite/index.js:438:15)
at ChildProcess.emit (node:events:513:28)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

Process finished with exit code 1

Reproduction

https://github.com/Linh2196/sveltekit-test

Logs

TypeError: configureStore is not a function
    at file:///.../my-app/.svelte-kit/output/server/entries/pages/_layout.svelte.js:41:15
    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:533:24)
    at async Module.component (file:///my-app/.svelte-kit/output/server/nodes/0.js:4:39)
    at async Promise.all (index 0)
    at async render_response (file://.../my-app/.svelte-kit/output/server/index.js:1218:19)
    at async render_page (file://.../my-app/.svelte-kit/output/server/index.js:1676:12)
    at async resolve (file://.../my-app/.svelte-kit/output/server/index.js:1981:22)
    at async respond (file://.../my-app/.svelte-kit/output/server/index.js:2019:22)

[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> (file:///.../my-app/node_modules/@sveltejs/kit/src/exports/vite/index.js:438:15)
    at ChildProcess.emit (node:events:513:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

Process finished with exit code 1

System Info

macOS Monterey 12.6
Chip Apple M1 Pro
Mem 32GB

Severity

blocking an upgrade

Additional Information

In older sveltekit, (1.0.0-next.168) it 's running stable. But I want to upgrade to latest version

[Conduitry]

Please provide a minimal reproduction. There are a ton of dependencies in your package.json file.

[harrytran998]

Please provide a minimal reproduction. There are a ton of dependencies in your package.json file.

Sorry for that --> Here is the minimal version: https://github.com/harrytran998/sveltekit-test.git

💡 Attention: This run well in development mode, but will have error in build mode

I think this issue relates to the ESM problem. When Vite run in order ESM first --> will load node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js

This file exposes

// src/index.ts
enableES5();
export { configureStore, .... };

BCS when I tried to change a little bit with the above repo

// import * as toolkit from '@reduxjs/toolkit'
import { configureStore } from '@reduxjs/toolkit'
import { promotion } from './modules/promotion'

// const { configureStore } = toolkit

export const store = configureStore({
  reducer: {
    promotion: promotion.reducer,
  },
})

The error will display more clearer.

import { configureStore } from "@reduxjs/toolkit";
         ^^^^^^^^^^^^^^
SyntaxError: Named export 'configureStore' not found. The requested module '@reduxjs/toolkit' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@reduxjs/toolkit';
const { configureStore } = pkg;

@Conduitry So you have any suggestions for this issue? Besides redux problems, I also face the redux-persist problem with the ESM issue.

[Linh2196]

Please provide a minimal reproduction. There are a ton of dependencies in your package.json file.

My package.json is more minimal now, can you support me @Conduitry

[dummdidumm]

Add ssr: { noExternal: ["@reduxjs/toolkit"] }, to your vite.config.ts and middleware: [] to your configureStore store call and it should work. @bluwy @dominikg is it expected to put this to noExternal? It looks like Vite is loading the CJS version if not done, and that somehow fails with all import methods that should work - want to make sure this is not a Vite bug.

[dominikg]

https://publint.bjornlu.com/@reduxjs/toolkit@1.8.6 looks like they have a cjs package but provide a module field? on top of that it use the infamous .esm.js extension instead of .mjs

Looks like suboptimal packaging on their end to me and noExternal being a workaround. The solution would be redux toolkit offering a proper esm package

[Linh2196]

@dummdidumm thank you so much for your workaround.
@dominikg yeah yeah, I think so

[harrytran998]

publint.bjornlu.com/@reduxjs/toolkit@1.8.6 looks like they have a cjs package but provide a module field? on top of that it use the infamous .esm.js extension instead of .mjs

Looks like suboptimal packaging on their end to me and noExternal being a workaround. The solution would be redux toolkit offering a proper esm package

Yeah, I think currently it is an acceptable solution. Bcs I think the redux toolkit should do that for the mask of development.
Do you think should I open an issue for their team to make a plan for this?

Besides Redux Toolkit, we use a lot of dependencies like chart.js, mqtt, redux-persist... So I think your team might be do something about this?

[benmccann]

Do you think should I open an issue for their team to make a plan for this?

This has already been reported as a bug in redux-toolkit: reduxjs/redux-toolkit#1960. I will close this in favor of that issue

Besides Redux Toolkit, we use a lot of dependencies like chart.js, mqtt, redux-persist... So I think your team might be do something about this?

The majority of dependencies work just fine. You can force a poorly packaged dependency to be bundled with the noExternal config above. Chart.js 4.0 will work out-of-the-box and I don't see any issues with mqtt from a quick glance at it. This is mostly just specific to redux being broken.

[markerikson]

@dominikg improving our RTK package publishing and module exporting has been high on my todo list for a long time. However, that would be a breaking change, so it has to wait for RTK 2.0. We've had many other things on our plate, so 2.0 has had to wait for a while. However, we just put out 1.9 beta, and once 1.9 is out the door I do want to move ahead quickly and start tackling changes for 2.0. No ETA on that, but this is the next priority for us.