Components library built with Vite works with Vue but not with Nuxt

50 Views Asked by At

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?

enter image description here

[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'],
  },
});
0

There are 0 best solutions below