balmjs / balm-ui

:diamonds: A modular and customizable UI library based on Material Design and Vue
https://material.balmjs.com
MIT License
506 stars 30 forks source link

Uncaught TypeError: Cannot read properties of null (reading 'isCE') #125

Open bla5bla opened 2 years ago

bla5bla commented 2 years ago

I tried integrating balm into my vue 3 project and the project compiles just fine, but it's completely empty. When i click 'inspect' in my browser and go to the console though, i get this error message:

app.js:160 Uncaught TypeError: Cannot read properties of null (reading 'isCE') at renderSlot (webpack-internal:///../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6667:34) at Proxy.eval (webpack-internal:///../node_modules/balm-ui/dist/balm-ui.esm.js:121:26343) at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1019:44) at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5136:57) at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:205:25) at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5262:9) at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5045:9) at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5003:17) at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4604:21) at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4791:13)

I tried doing a bit of research on what this means, but I can't seem to find a solution. I don't know whether this error comes up as a result of me wrongfully installing balm or from an unrelated source, but I would appreciate some help since I'm quite new to vue 3 and I'm still trying to figure it out! Here are the files I modified when installing balm for reference:

main.js:

import { createApp } from 'vue'; import App from './App.vue';

import BalmUI from 'balm-ui'; import BalmUIPlus from 'balm-ui-plus'; import 'balm-ui-css';

const app = createApp(App);

app.use(BalmUI); app.use(BalmUIPlus); app.mount('#app');

vue.config.js:

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true })

module.exports = { runtimeCompiler: true, configureWebpack: { resolve: { alias: { 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js', 'balm-ui-css': 'balm-ui/dist/balm-ui.css' } } }, chainWebpack: (config) => { config.resolve.alias .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js') .set('balm-ui-css', 'balm-ui/dist/balm-ui.css'); } };

the only thing I modified from my original App.vue file was adding

BUTTON in the template section. If I delete it, the app works perfectly so I'm guessing this problem has to do with either the installation process or the definition of the button.
DaryeDev commented 2 years ago

It is happening to me with Confirm Dialogs, bumping this one up, I need a fix (more or less) soon.

elf-mouse commented 2 years ago

Sorry @DaryeDev , I did not reproduce the problem and I'm using balm-ui@10.3.1

You can refer to this example and try again

Thank you~