Not working with Vue 2 and Webpack 5

[s-sasaki-0529]

Describe the bug

Thanks for the nice package to use Chart.js 3 with Vue 3! I would like to use this to simplify my migration from Vue 2 to 3.

but when using vue-chart-3@legacy with webpack, I get the following error.

ERROR in ./node_modules/vue-chart-3/dist/index.mjs 33:0-44
Module not found: Error: Can't resolve 'lodash-es/startCase' in '/Users/shingo.sasaki/webpack-vue-2-vue-chart-3/node_modules/vue-chart-3/dist'
Did you mean 'startCase.js'?
BREAKING CHANGE: The request 'lodash-es/startCase' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/App.vue?vue&type=script&lang=js& 10:0-50 16:4-12 17:4-13
 @ ./src/components/App.vue?vue&type=script&lang=js& 1:0-118 1:134-137 1:139-254 1:139-254
 @ ./src/components/App.vue 2:0-55 3:0-50 3:0-50 9:2-8
 @ ./src/main.js 3:0-39 10:4-7 13:25-28

To Reproduce

Please see the following repository (sorry, I couldn't reproduce this in codesandbox) https://github.com/s-sasaki-0529/reproduce-vue-chart-3-issue

Version of vue-chart-3

v2.1.1

Version of Vue

• [ ] Vue 3
• [x] Vue 2
• [ ] Nuxt 2
• [ ] Nuxt 3

My solution

It seems that esm is supported for vite, but the standard webpack configuration does not solve this problem.

The following settings may resolve, but I would be grateful if you could specify the extension in components.ts. https://webpack.js.org/configuration/module/#resolvefullyspecified

[victorgarciaesgi]

Hmm it should be working with webpack too. I will look at your repo.

In this codesandbox there is no problem https://codesandbox.io/s/vue-chart-3-vue-2-mw54f?file=/src/App.vue

[victorgarciaesgi]

And if you're in webpack, it's not normal to have an error in the mjs file ERROR in ./node_modules/vue-chart-3/dist/index.mjs. This file is for ESM bundlers only, webpack must use index.js commonjs build.

[victorgarciaesgi]

Can confirm, you have missing webpack configuration. I strongely advise you to use vue-cli for all your Vue 2 project as it ships with the correct configuration and avoid those errors

[s-sasaki-0529]

I strongely advise you to use vue-cli for all your Vue 2 project as it ships with the correct configuration and avoid those errors

Thanks for the advice. However, we can't use vue-cli in our product because we use webpack directly.

Can confirm, you have missing webpack configuration.

I found out that my repository uses webpack v5 and vue-cli uses webpack v4.

This package uses the exports field in pakcage.json, but webpack will not use it until v5. (refs) So, only when webpack v5 try to resolve import vue-chart-3 it refers to the mjs file.

Therefore this issue is correct: Not work with webpack 5.

Probably, this package is not intended to be used with webpack 5, so I will try to solve this problem with webpack configuration. Thank you.

[victorgarciaesgi]

Hmm yes it seems webpack 5 does not handle ESM like Vite.js or Nuxt 3. Sorry for the confusion, i will look at it and see if it doesn't break build for Webpack 4 or Vite :)

[victorgarciaesgi]

I'm just curious in the reason to use vanilla Vue directly because vue-cli lets you customize the webpack config as well

[victorgarciaesgi]

Try v2.1.2

[s-sasaki-0529]

Thank you very much for your reply. I'm looking forward to v2.1.2!

I'm just curious in the reason to use vanilla Vue directly because vue-cli lets you customize the webpack config as well

Well... It's an old project, so I don't know, but I think it's because it's very customisable and we can use the latest tools. (eg. webpack 5)