Vite, ssr => Error [ERR_REQUIRE_ESM]

[aleksanderd]

Trying to setup ssr with vite. Created server.ts as described in solid/vite docs/examples but at

render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render; // renderToStringAsync inside

got error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/rootfs/var/www/thesite/thesite/node_modules/solid-app-router/dist/index.js
require() of ES modules is not supported.
require() of /home/rootfs/var/www/thesite/thesite/node_modules/solid-app-router/dist/index.js from /home/rootfs/var/www/thesite/thesite/node_modules/vite/dist/node/chunks/dep-11db14da.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/rootfs/var/www/thesite/thesite/node_modules/solid-app-router/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
    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 (/home/rootfs/var/www/thesite/thesite/node_modules/vite/dist/node/chunks/dep-11db14da.js:73337:17)
    at ssrImport (/home/rootfs/var/www/thesite/thesite/node_modules/vite/dist/node/chunks/dep-11db14da.js:73290:20)
    at eval (/src/AppDocument.tsx:18:31)
    at instantiateModule (/home/rootfs/var/www/thesite/thesite/node_modules/vite/dist/node/chunks/dep-11db14da.js:73323:166)

Could you help with it?

Thank you!

[rturnq]

Are you using Windows? If so, I would point you to this Vite issue: vitejs/vite#2393

The workaround here is to tell Vite not to externalize the router from the SSR build (eg. use the commonjs version shipped in the package) by adding the following in your Vite config file:

// vite.config.js
export default defineConfig({
  //...
  ssr: {
    noExternal: ['solid-app-router']
  },
});

Even if you are not using Windows, Vite uses a heuristic to make the decision which may fail, so the workaround it should work in other cases too. Here is Vite's documentation about SSR externals: https://vitejs.dev/guide/ssr.html#ssr-externals

[rturnq]

Just noticed the paths in your error 🤦 Try adding the config option anyway - hopefully that will resolve the issue.

[aleksanderd]

Yes, it helped.

Thank you very much!