This content originally appeared on DEV Community and was authored by relliv
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: { ... },
});
This content originally appeared on DEV Community and was authored by relliv
relliv | Sciencx (2024-11-01T18:55:27+00:00) How to fix `Uncaught TypeError: Cannot read properties of null (reading ‘ce’)` error. Retrieved from https://www.scien.cx/2024/11/01/how-to-fix-uncaught-typeerror-cannot-read-properties-of-null-reading-ce-error/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.