Not working with Vue 2 and Webpack 5

See original GitHub issue

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
  • 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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
victorgarciaesgicommented, Feb 16, 2022

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

1reaction
victorgarciaesgicommented, Feb 16, 2022

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 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack 5 doesn't see styles in vue 2 sfc - Stack Overflow
When setting up the config and updating plugins, I ran into a problem, the sfc components of vue see only the styles of...
Read more >
Webpack 5 Vue 2 - Failed to mount component: template or ...
I have been working on shipping my app from webpack V4 to V5 on my Vue V2 app and the major changes I...
Read more >
Vue2. X — WebPack 4.x Upgrade to Vue2. X — WebPack 5.x
After an arduous round of testing, it was found to be a vue-loader problem. It is enough to update to the 15.x version....
Read more >
[Solved]-Webpack 5 not showing images-Vue.js
Coding example for the question Webpack 5 not showing images-Vue.js. ... This is not working anymore. The url-loader is even removed from the...
Read more >
Tree Shaking - webpack
The webpack 2 release came with built-in support for ES2015 modules (alias ... Note that we did not import the square method from...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found