Not working with Vue 2 and Webpack 5
See original GitHub issueDescribe 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:
- Created 2 years ago
- Comments:8 (6 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’m just curious in the reason to use vanilla Vue directly because vue-cli lets you customize the webpack config as well
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 😃