search

unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue
https://www.npmjs.com/package/unplugin-vue-components
MIT License
3.84k stars 352 forks source link

this plugin destroy sourcemap. #219

Open joker77877 opened 3 years ago

joker77877 commented 3 years ago

When using this plugin, I can't normally debugging in chrome. For example, I can't set breakpoint at below position: image

reproduce repositiory: https://github.com/joker77877/vue3-ts-eslint/blob/master/src/components/HelloWorld.vue

mrgulc commented 2 years ago

yes! me too

joker77877 commented 2 years ago

Can you solve it quickly? It will affect code debugging.

gaopengpian commented 2 years ago

me too

smallp commented 2 years ago

Same issue.

gaopengpian commented 2 years ago

please fix it

smallp commented 2 years ago

I have solved this problem. Add build: { sourcemap: true, }, to vite.config.js and it should work fine. This plugin depends this config to generate sourcemap. BTW, need to disable cache after changing the setting.

Djaler commented 2 years ago

@smallp this doesn't help me. I have latest version of vite (2.7.13), vite-plugin-vue2 (1.9.3) and unplugin-vue-components (0.17.14), build.sourcemap is set to true in vite config, but I still get incorrect source map: image There should be imports of vuetify components (v-container, v-row, etc)

smallp commented 2 years ago

@smallp this doesn't help me. I have latest version of vite (2.7.13), vite-plugin-vue2 (1.9.3) and unplugin-vue-components (0.17.14), build.sourcemap is set to true in vite config, but I still get incorrect source map: image There should be imports of vuetify components (v-container, v-row, etc)

You dont have to set build.sourcemap now. Try again and give me a sample if it still cannot work.

Djaler commented 2 years ago

@smallp try this https://github.com/Djaler/unplugin-vue-components-vite-source-map-bug

  1. npm install
  2. npm run build
  3. npm run preview
  4. open http://localhost:4173/
  5. open devtools -> sources -> src/App.vue

As you can see, we can place debugger only on line 16. Also, if you click button on page, you'll stop on line 16, while debugger statement present on line 20 image

smallp commented 2 years ago

@Djaler Yes, the source map of build result is wrong. But you can use npm run dev. That works fine.

Djaler commented 2 years ago

Sure, but I need correct maps in production, because of Sentry

smallp commented 2 years ago

Sure, but I need correct maps in production, because of Sentry

Sorry, I'm not able to help you. I dont know the process of building.

zcmk123 commented 2 years ago

Sure, but I need correct maps in production, because of Sentry

can you set breakpoint in your project? i clone your project, then click the button, console out put "could not load the sourcemap 404" image

i'm using vue3 + vite with this plugin, upgrade plugin to latest version. still can not set breakpoint in devtools

LiuQuanYou commented 2 years ago

me too

VincentDream commented 2 years ago

me too

Mehdi-Hp commented 2 years ago

Well, I spent hours and now I know unplugin-vue-components is causing my issue and there is no solution

rezelute commented 2 years ago

We spent ages trying to figure out the reason debugging was not working in our new project and also finally made this same discovery today. It seems that Composition API code debugging works but not Options API. Is there any potential resolution for this? Thank you.

jeddi commented 1 year ago

We have the same problem + our tests coverage is wrong!

LoicMonard commented 1 year ago

Same problem here, any updates ?

nlvedwin commented 1 year ago

i got same problem

jeddi commented 1 year ago

Hello i have found a work-around that works for me: add this to vue file:

<script setup>
// work-around https://github.com/antfu/unplugin-vue-components/issues/219
</script>
LoicMonard commented 1 year ago

Yeah the script setup is working but it's a problem if your whole codebase isn't based on script setup

superchangme commented 1 year ago

does any one resolve this problem?

superchangme commented 1 year ago

i use <script lang="jsx setup> will apprear this problem

gaopengpian commented 1 year ago

I fixed this problem a year ago, but I’m not sure which of the following changes took effect.

  1. remove plugin ： vite-plugin-vue-setup-extend
  2. vite-plugin-compression ： compressPlugin add config ：verbose: false
  3. "unplugin-auto-import": "0.5.3" update to 0.5.11
galaa2011 commented 1 year ago

so? how to reslove?

Code-terminal commented 1 year ago

how to reslove? this error afftect developing sence a lot.

doutatsu commented 1 year ago

This is a huge issue, that needs to be fixed... This has been an issue since 2021 and I am surprised there has been no attempt at fixing this. Test coverage being broken is one thing, but source map being broken entirely is even worse, if you have any sort of error tracking, like Sentry, that relies on it... I was quite excited to use this, but seems like it's not worth it

ys3322 commented 1 year ago

Using this plugin, if the Vue version is greater than 3 and the options syntax is used in the component, the bug of the debugger offset will be reappear！！！

LonelySunset commented 1 year ago

Using this plugin, if the Vue version is greater than 3 and the options syntax is used in the component, the bug of the debugger offset will be reappear！！！

me too

MrRabbit1993 commented 1 year ago

Using this plugin, if the Vue version is greater than 3 and the options syntax is used in the component, the bug of the debugger offset will be reappear！！！

yes, i got same problem. this problem occurs in jsx or tsx.

unplugin-vue-components": "^0.25.0", "vue": "^3.2.47", "vite": "^4.3.9", "@vitejs/plugin-vue-jsx": "^3.0.1"

al123xiaaaa commented 1 year ago

What a terrible bug! It completely undermines the Vue 3 DX, wasting a significant amount of time for those using this library in enterprise projects and forcing people into a 996 work schedule. This bug has persisted for a year and a half now...

shanguoteng commented 1 year ago

使用 Githubissues.

  • Githubissues is a development platform for aggregating issues.