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.
3
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')