I have a components library built with Vite and it works perfectly in Vue 3 projects, but it simply does not work in Nuxt 3 projects and it shows the following error. I am doing something wrong?
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'createElement')
OBS: I'm not using createElement anywhere in the code.
vite.config.ts in the library:
import vue from '@vitejs/plugin-vue';
import path from 'path';
import typescript2 from 'rollup-plugin-typescript2';
import { defineConfig } from 'vite';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
import dts from 'vite-plugin-dts';
export default defineConfig({
plugins: [
vue(),
dts({
insertTypesEntry: true,
}),
cssInjectedByJsPlugin(),
typescript2({
check: false,
include: ['src/components/**/*.vue'],
tsconfigOverride: {
compilerOptions: {
outDir: 'dist',
sourceMap: true,
declaration: true,
declarationMap: true,
},
},
exclude: ['vite.config.ts'],
}),
],
build: {
cssCodeSplit: true,
lib: {
entry: path.resolve(__dirname, 'src/lib-components/index.ts'),
name: 'MyDesignSystemExample',
formats: ['es', 'cjs', 'umd'],
fileName: (format) => `design-system-ui.${format}.js`,
},
rollupOptions: {
input: {
main: path.resolve(__dirname, 'src/main.ts'),
},
external: ['vue'],
output: {
assetFileNames: (assetInfo) => {
if (assetInfo.name === 'main.css') return 'design-system-ui.css';
return assetInfo.name;
},
exports: 'named',
globals: {
vue: 'Vue',
},
},
},
},
server: {
port: 8080,
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
dedupe: ['vue'],
},
});
package.json in the library:
{
"name": "my-design-system-example",
"version": "1.0.0",
"description": "Design System",
"type": "module",
"files": [
"dist",
"src/**/*.vue"
],
"main": "./dist/design-system-ui.umd.js",
"module": "./dist/design-system-ui.es.js",
"exports": {
".": {
"types": "./dist/main.d.ts",
"import": "./dist/design-system-ui.umd.js",
"require": "./dist/design-system-ui.es.js"
},
"./dist/design-system-ui.css": {
"import": "./dist/design-system-ui.css",
"require": "./dist/design-system-ui.css"
}
},
"scripts": {
"preinstall": "npx -y only-allow pnpm",
"dev": "vite",
"build": "rm -rf dist && vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint --ext .ts,vue --ignore-path .gitignore .",
"format": "prettier -w -u . !./pnpm-lock.yaml",
"save": "npm version patch --force",
"version": "npm run build && git add .",
"postversion": "git push && git push --tags && npm publish"
},
// ...
}
main.ts in the library:
import './tailwind.css';
import type { App, Component } from 'vue';
import * as components from '@/lib-components';
type ComponentType = Component & {
_name: string;
};
export default {
install: (app: App) => {
for (const key in components) {
const componentsObject = components as unknown as Record<string, ComponentType>;
app.component(
componentsObject[key].name ?? componentsObject[key]._name,
componentsObject[key]
);
}
},
};
export * from './lib-components';
nuxt.config.ts in the Nuxt project:
OBS: It works if I disable SSR here
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss',
'@pinia/nuxt',
'@pinia-plugin-persistedstate/nuxt',
],
devServer: {
port: 8080,
},
build: {
transpile: ['my-design-system-example'],
},
});
