[Vite] 'require is not defined' after build

[martinkruusement]

Not sure if this is an issue with my vite.config.js

I did try to get Vite to transpile the package to an ES Module with no luck:

optimizeDeps: {
    include: ['mdi-vue']
}

Output of the production build:

import { mdiAlert } from '@mdi/js'
import './icons.css'

const { h: v3h } = require('vue') // import vue3's render function

Uncaught ReferenceError: require is not defined at main.js:4

[therufa]

Hi @martinkruusement,

thanks for taking the time for reporting this issue. Sadly Vite does not support require statements, therefore the library will not work with this lib, yet.

Any ideas and contributions are welcome though :)

[therufa]

@martinkruusement, I released a new version of the library just a moment ago which should support vite as well. I'd feel honoured if you'd provide a little feedback.

The lib needs to be included a little differently now:

import mdiVue from 'mdi-vue/v3'

[martinkruusement]

Making progress 👍

Installation complains about:

Could not resolve dependency:
npm ERR! peer vue@"^2.6.12" from mdi-vue@3.0.2

Forcing it with --legacy-peer-deps gets everything to work in development again.

However, build now breaks at:

'h' is not exported by node_modules/mdi-vue/node_modules/vue/dist/vue.runtime.esm.js, imported by node_modules/mdi-vue/v3.js
file: /Users/.../node_modules/mdi-vue/v3.js:1:9
1: import { h } from 'vue'

I see you're using vue^2.6.12. Could this be the problem?

[therufa]

well, the peer dependency is obviously wrong. not sure how to manage the package for both versions. maybe we can just leave it away completely? the version of the main project should be sufficient 🤔 (just thinking out loud)

[martinkruusement]

Hmmm. I think we are safe to assume that some version of Vue is already installed if someone wants to use this package.

[martinkruusement]

I looked at how vuex does this.

They have the vue package listed in peerDependencies as well as devDependencies, but not in actual dependencies.

[therufa]

I looked at how vuex does this.

They have the vue package listed in peerDependencies as well as devDependencies, but not in actual dependencies.

good call! I just released a version with these changes. Thanks for your efforts!

[martinkruusement]

It works! Thank you.

Never knew you could use an asterisk in package.json as a version. That's a clever solution.

I discovered there's also a package called vue-demi that may help simplify the current v2/v3 setup and abstract away the importing of the render function.

[therufa]

Thanks for the hint! This vue-demi project seems promising. Maybe one day we can transition back to just having a single file to import, but for now we're at least running fine :) Thanks again for your efforts @martinkruusement ;)