How to fix `Uncaught TypeError: Cannot read properties of null (reading 'ce')` error

I got this error while working on my custom vue package. And if you are experiencing this problem with vue and vite, the solution is quite simple.

Why?

This error occurs when you import packaged components from the parent project in the Vue project. The error is caused by the Vue project's vite configuration. Vue should define as peerDependency in package's package.json file. At the same time we have to exclude vue code from the bundled output.

Solution

Add rollupOptions block to the vite.config.ts file (also, check official tutorial).

/// <reference types='vitest' />
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";
import * as path from "path";
import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
import { nxCopyAssetsPlugin } from "@nx/vite/plugins/nx-copy-assets.plugin";

export default defineConfig({
  root: __dirname,
  cacheDir: "../../../node_modules/.vite/libs/features/nx-vue-calendar-heatmap",
  plugins: [...]
  build: {
    outDir: "..."
    emptyOutDir: true,
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    lib: {
      ...
      rollupOptions: {// <--- Add this block start
        // External packages that should not be bundled into your library.
        external: ["vue"],
        output: {
          // Provide global variables to use in the UMD build
          // for externalized deps
          globals: {
            vue: "Vue",
          },
        },
      },// <--- Add this block end
    }
  }
  test: { ... },
});