indielayer / ui

Vue 3 & Nuxt 3 UI Library with Tailwind CSS 3. 🚀 Build and prototype fast web applications.

Home Page:https://indielayer.com/ui/docs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SSR support

fan711 opened this issue · comments

When using Vite SSR (server-side rendering) the build reports this error:

import { tailwindColors as r } from "./composables/colors-utils.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Object.require.extensions.<computed> [as .js] (C:\Users\mail\AppData\Roaming\nvm\v18.18.0\node_modules\ts-node\src\index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Apparently that has to do with the fact that Vite SSR seems not to support ESM. I have tried to import from 'node_modules/@indielayer/ui/lib/index.umd.js' which solved the above issue but then failed with 'TypeError: Cannot read properties of undefined (reading 'defineComponent').

I'm trying hard to use this great UI library on SSR.

Thank you for the report @fan711. Adding "type": "module" to enable es modules. Let me know if it's not working as expected in 1.2.0