TypeError: Cannot read properties of null (reading 'ce')

The app I'm working with contains a core and modules. As I was migrating from Vue 2 to Vue 3, I encountered an error that I can't seem to solve. In the previous version, each module contained a Rollup configuration that created two files (components.js and settings.js) and placed them in Roaming/installationFile/module/nameofModule. These two files are then read by the core app. rollup.config

//... imports
const plugins = [
  image(),
  json(),
  commonjs(),
  vue({
    css: true, // Inject CSS in <style> tag
  }),
  nodeResolve({ browser: true })
]

export default [
  {
    input: 'src/wrapper.js',
    output: {
      file: 'dist/component.js',
      format: 'es'
    },
    plugins
  },
  {
    input: 'src/settings/Settings.vue',
    output: {
      file: 'dist/settings.js',
      format: 'es'
    },
    plugins
  }
];

package.json

//...
"scripts": {
        "dev": "node ./dev.js",
//...

dev.js adds the files to Roaming/installationFile/module/nameofModule as mentioned, using fs.

After migration: vite.config.js

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()], // I'm using element plus for front
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    resolve: {
        dedupe: ['element-plus']
    },
    build: {
        lib: {
            entry: {
                component: 'src/wrapper.js',
                settings: 'src/settings/Settings.vue',
            },
            formats: ['es'],
        },
        minify: false,  // Disable minification
        rollupOptions: {
            output: {
                dir: 'dist',  // Directory for the output files
                format: 'es',
                entryFileNames: '[name].js',  // Will create component.js and settings.js
            },
        },
    },
}) 

I tried using Rollup, but the Vue 3 plugin I tried did not work for me.

The error is: TypeError: Cannot read properties of null (reading 'ce') (It's 'ce' in my case, not isCE).

What I tried:

• I followed every solution provided in this discussion: https://github.com/vuejs/core/issues/4344.
• When I remove AutoImport and Components, I no longer get any errors, but Element Plus and the CSS don't work.
• I tried to manually import element plus element as showen in https://element-plus.org/en-US/guide/quickstart Manually import paragraph not working

Update: After switching from Element Plus to Vuetify, the components started partially working. For example, the v-select component appears fine, but when I click on it, I don't see the items in the dropdown list. I also encountered a CSS issue, which I resolved by using the plugin vite-plugin-css-injected-by-js. I'm now considering whether there's a Vue 3.4 plugin for Rollup.js, so I can potentially switch from Vite to Rollup.

Update: I was so focused on the UI library that I overlooked the actual issue, which was in how I was importing my modules.

To import my module, I was using dynamic import in ES6+:

const pathToComponent = './path/to/Component'
const module = defineAsyncComponent(() => import(pathToComponent)

Since I'm using Vite, the pathToComponent is not interpreted as a path, which caused the error.

To resolve the issue, I needed to add the following to my Vite configuration:

Add external in my vite config:

 rollupOptions: {
            external: ['vue', 'element-plus', 'pinia'],

In the core, I used resolve.alias in the Vite configuration and passed the alias as the argument for the import. This worked fine:

resolve: {
    alias: {
      '@module1': fileURLToPath(new URL(`file:///C:/Users/myPath`)),

and for the import I did:

const module = defineAsyncComponent(() => import('@module1')