DEV Community

Cover image for How to fix `Uncaught TypeError: Cannot read properties of null (reading 'ce')` error?
relliv
relliv

Posted on • Edited on

2

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 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: { ... },
});
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs