Breaks Inertia SSR? To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

[ryggdunk]

• Vue Version: 3.2.31
• Vue Select Version: 4.0.0-beta.6

Describe the bug Using Jetstream/InertiaJS/Vue 3, trying to run in SSR mode produces the following error

node bootstrap/ssr/ssr.mjs
Starting SSR server on port 13714...
Inertia SSR server started.
(node:59424) 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)
/Users/ryggdunk/Sites/inertia/node_modules/vue-select/dist/vue-select.es.js:13
import { openBlock as a, createElementBlock as h, createElementVNode as u, resolveDirective as K, normalizeClass as A, renderSlot as r, normalizeProps as d, guardReactiveProps as c, Fragment as B, renderList as L, createTextVNode as v, toDisplayString as D, createBlock as b, resolveDynamicComponent as _, createCommentVNode as O, mergeProps as k, toHandlers as j, withDirectives as w, vShow as P, createVNode as $, Transition as R, withCtx as z, withModifiers as F } from "vue";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1159:20)
    at Module._compile (node:internal/modules/cjs/loader:1203:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1293:10)
    at Module.load (node:internal/modules/cjs/loader:1096:32)
    at Module._load (node:internal/modules/cjs/loader:935:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

I have included vue-select like this:

<script setup>
import vSelect from 'vue-select'

Steps To Reproduce

• composer create-project laravel/laravel
• composer require laravel/jetstream
• php artisan jetstream:install inertia --ssr
• npm install
• npm install vue-select@beta
• npm run build
• php artisan migrate
• node bootstrap/ssr/ssr.mjs

Expected behavior Should run website in SSR mode

[ryggdunk]

Like the error say, adding "type": "module" to package.json in node_modules/vue-select works. But not sure if that's the best solution though.

[rlidev]

I have the same problem, I'm using Laravel 9 with Vue 3 and Inertia, putting the ssr mode to inertia when you visit the page breaks the ssr

[rlidev]

A screenshot of the error

[rlidev]

I think I have solved the problem, if you are using vite, in your vite.config.js file you must add the library in noExternal. The error in ssr mode disappeared and everything seems to work.

If someone more knowledgeable can give their opinion, we would appreciate your words, thank you.

[JekaSylar]

Has anyone managed to fix the bug ?

[gidhublan]

I am experiencing the same issue and have not been able to fix it.