Vue 2 - Browser, Firefox and previously chromium, Source Maps are broken

[mcareydsgn]

Version

2.7.7

Reproduction link

github.com

Steps to reproduce

Please use the github repository provided to see a working example. Instructions on how to run app is provided in mark down.

What is expected?

The issue is that webpack's source maps are not working correctly. I should be able to see Vue Single File Component in the debugger tab of Firefox devtools.

What is actually happening?

I am unsure of what the code is that is showing in the debugger tab of the devtools. I am guessing the source mapping is off or something.

---

This may be a bit confusing because my links are for a Chromium issue that was "fixed", but it is now happening in Firefox. The fix for Chromium was more of a band aid and the real issue lies with Vue and Webpack generating it's source maps and how the browsers handle displaying the source maps.

Please review the Chromium ticket as there is a lot of documentation there regarding this issue.

https://bugs.chromium.org/p/chromium/issues/detail?id=1304217.

Per comment 36 Chromium developer mentions that the fix is "quite arbitrary IMHO. And ideally tools shouldn't generate (and embed) different content under the same URL."

Additionally here is a stack overflow of the issue.

https://stackoverflow.com/questions/71387156/google-chome-99-devtools-source-tab-not-showing-vue-file-code-in-webpack-src-fo/72061160?noredirect=1#comment129028282_72061160

[yyx990803]

Is this something that only happened recently (after 2.7 release)?

[mcareydsgn]

Sorry no, this is for version 2.6.11, but has been an issue that began 4 months ago with Chromium going from version 99 to 102 when they release a patch. This just started with Firefox about a week ago starting with version 102.

I have noticed a change in how the single file components are viewed in each browser over the past year or so. It use to show one file in the Webpack folder on the source/debugger panel but now it shows multiple copies like Navbar.vue?638c

This is an example of what my app shows in the debugger tab for a single file component if Firefox.

import { render, staticRenderFns } from "./AppNavbar.vue?vue&type=template&id=2f7a65f6&"
import script from "./AppNavbar.vue?vue&type=script&lang=js&"
export * from "./AppNavbar.vue?vue&type=script&lang=js&"
import style0 from "./AppNavbar.vue?vue&type=style&index=0&lang=scss&"

/* normalize component */
import normalizer from "!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
var component = normalizer(
  script,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null

)

export default component.exports

Firefox also use to show multiple "versions" but now they just have the one.

This is a bit of blind spot for me so I am unsure if I am articulating the issue correctly.

[Lphal]

v2.7.8 is the same, production sourcemap is broken.

I used v2.7.8 in vue/cli4, vue/cli5 and vite, sourcemap works fine only in vite. But v2.6.14 is always working fine in vue/cli4 and 5. I didn't try v2.6.14 in vite.

Reproduction link

https://github.com/Lphal/vue-demo-2.7-cli4

when I click logs in chrome console, it jumps to sourcecode.

use v2.6.14:

use v2.7.8:

I'm wondering if there is something wrong with vue-loader🧐. @yyx990803

[YFengFly]

This issue has been around for a long time and has been asked in Vue CLI and Vue Loader : https://github.com/vuejs/vue-cli/issues/7130 https://github.com/vuejs/vue-loader/issues/1975 —— In this issue , typescript source maps is also abnormal. Since the release of Chrome 99(Vue 2.7 has not yet been released), all Vue 2 Source maps have been abnormal, which I think is related to this. http://developer.chrome.com/en/blog/new-in-devtools-99/ In particular, Vite does not have this issue.In general, *.js is also normal.

这个问题已经很久了，并且在 Vue CLI、 Vue Loader 中都有反馈： https://github.com/vuejs/vue-cli/issues/7130 https://github.com/vuejs/vue-loader/issues/1975 —— 这里提到了 typescript 的源码映射似乎也一直有问题 自从 Chrome 99 发布之后（此时 Vue 2.7 尚未发布），全部的 Vue 2 的 Source Map 便出现了异常， 我想应该与此有关。 http://developer.chrome.com/zh/blog/new-in-devtools-99/ 需要特别说明的是，Vite 并不存在这个问题。一般来说， *.js 也是正常的。

---

To display the Source Map, I configured Webpack as： devtool: 'source-map' When using Vue CLI 4 (Webpack 4), Vue 2 completely fails to display the Source Map of . Vue. When using Vue CLI 5 (Webpack 5), Vue 2 can partially display the '. Vue' Source Map.

为了显示 Source Map，我将 Webpack 配置成了： devtool: 'source-map' 当使用了 Vue CLI 4 （Webpack 4）的时候，Vue 2 完全无法正常显示 *.vue 的 Source Map; 当使用了 Vue CLI 5 （Webpack 5）的时候，Vue 2 可以部分正常显示 *.vue 的 Source Map.

[erhanfirat]

When I am using Vue 2.6.x I was able to debug Vue components, but after migrating to Vue 2.7.9 getting same problem. It makes debugging so hard . Is not there any plan to fix it?

[obkdev]

Hello, is there any update on this? At the moment we have stopped most vue development as it is impossible to debug the vue files in chrome. Is the fix to downgrade to vue 2.6?

[Thomas-1985]

@erhanfirat how did you manage to debug in Vue 2.6.x? I am on 2.6.14 and it doesn't work for me (i use Webstorm), i am using @vue/cli-service ^4.5.13 (which actually installs 4.5.19)

[erhanfirat]

@erhanfirat how did you manage to debug in Vue 2.6.x? I am on 2.6.14 and it doesn't work for me (i use Webstorm), i am using @vue/cli-service ^4.5.13 (which actually installs 4.5.19)

@Thomas-1985 it was just working on 2.6.12

[darrinmn9]

I am also encountering this issue while migrating a large codebase from 2.6 -> 2.7 -> 3, but I dont believe it to be a browser issue. It really seems that the issue is with 2.7. This can be easily reproduced by starting a new vue-cli project (latest), selecting babel+router+vuex+css preprocessors+linting. The only difference between the two projects is pinning vue to 2.6.14 vs ^2.7.14. yarn build + serve -s dist and you'll see the results.

v2.6.14 - source maps work for .vue templates

v2.7.14 - source maps DONT work for .vue templates

[darrinmn9]

Sorry for the multiple messages, but I dug a little further and realized something that I think could be helpful. I scaffolded two fresh vue-cli projects, one with just vue2.7, the other with vue2.7+babel (which installs @vue/cli-plugin-babel and core-js). The sourcemaps work in the vue2.7 project, but not the vue2.7+babel project. So its possible there is an issue with vue2.7 and babel that is causing the sourcemaps to break.

[1593292349]

@yyx990803 I have tried the solution here and it works on my machine. #https://github.com/vuejs/vue-loader/issues/1657

but there is something wrong with the sourcemap of <script setup lang="ts"> #https://github.com/vuejs/vue-loader/issues/2023

[dgautsch]

@yyx990803 I have tried the solution here and it works on my machine. #https://github.com/vuejs/vue-loader/issues/1657

but there is something wrong with the sourcemap of <script setup lang="ts"> #https://github.com/vuejs/vue-loader/issues/2023

Does this work with vue-loader@15.10.1? I'm having trouble following the solution suggested in https://github.com/vuejs/vue-loader/issues/1657

[mcareydsgn]

@dgautsch, @darrinmn9 and anyone else still experiencing this issue. I ended up switching to my build step for Vue 2 to Vite. It was fairly straight forward with the only bummer being for a multi page app with server side routing is that every page needs an index.html as entry point. I would be surprised if this ever gets fixed seeing that Vue 2 end of life is this year. It would be a good half step to migrating to Vue 3. Which is my current plan.

vite.configs.js

/// <reference types="vitest" />

import { defineConfig, splitVendorChunkPlugin } from 'vite'
import { createVuePlugin as vue2 } from 'vite-plugin-vue2'
import { URL, fileURLToPath } from 'url'
import glob from 'glob'
import path from 'node:path'
import { resolve } from 'path'
import handlebars from 'vite-plugin-handlebars';
import eslint from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/vite-build/dist/',
  plugins: [
    vue2(),
    eslint(),
    handlebars({
      partialDirectory: resolve(__dirname, 'partials'),
    }),
    splitVendorChunkPlugin()
  ],
  resolve: {
    alias: {
      'SRC': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  root: 'src',
  build: {
    outDir: '../dist',
    sourcemap: true,
    emptyOutDir: true,
    rollupOptions: {
      input: Object.fromEntries(
        glob.sync('src/**/*.html').map(file => {
          let key = path.dirname(file).split('/');
          key.splice(0, 1);
          key = key.join('-') + '-' + path.basename(file, '.html')
          let value = resolve(__dirname, file)
          return [key, value];
        })
      ),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "SRC/variables.scss";`,
      },
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
  }
})

A Little Explanation The input property of rollupOptions dynamically maps the index.html file for each page of the app. It takes the folder structure and combines it into the file name for all of the compiled page js files. Below is the project src folder and the dist folder after the input: Object.fromEntries(...) code block.

src 
-- dashboard
-- -- user
-- -- -- main.js
-- -- -- index.html
-- -- -- dashboard.vue
-- -- -- components
-- -- -- store
-- -- -- --modules

dist 
-- assets
-- -- dashboard-user-index.[HASH].js
-- -- dashboard-user-index.[HASH].js.map
-- dashboard
-- -- user
-- -- -- index.html

Additionally, I used the handle bar plugin to use partials to populate the index.html file for each page in the app. That way I can change it in one place and update all index.html files.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    {{> meta }}
    {{> favicons }}
    {{> fonts }}
    {{> gtag }}
    <title>User Dashboard</title>
  </head>
  {{> appbody}}
</html>

example partial for appbody.hbs

  <body">
    <noscript>
      <strong >We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
  </body>

Hope that helps anyone stuck. Any contributor to Vue 2 to can close this if they are no plans to fix.

[kiraraty]

@yyx990803 我已经尝试过这里的解决方案并且它可以在我的机器上运行。 #https://github.com/vuejs/vue-loader/issues/1657

但#https://github.com/vuejs/vue-loader/issues/2023的 sourcemap 有问题<script setup lang="ts">

只加lang="ts"其实就会有问题了，同时tsconfig里面sourcemap设置为true可以准确还原script代码，但是无法还原template。 vue2.7在js下可以正常通过source-map进行完整还原 vue2.7在ts下无法通过source-map进行完整还原，行列号错误（问题在于vue-loader v16）

[yyx990803]

Can no longer reproduce source map issues (including with lang="ts") with the latest deps (vue 2.7.15, @vue/cli-* 5.0.8, vue-loader 15.11.1). It could also be that Chrome has fixed the issue.

[darrinmn9]

@yyx990803 I can still reproduce a sourcemaps issue with vue 2.7.15, vue-loader 15.11.1, @vue-cli 5.0.8 as i detailed in https://github.com/vuejs/vue/issues/12689#issuecomment-1377464957 (vue 2.6.x works fine)... but only with the plugin @vue/cli-plugin-babel 5.0.8. Was your reproduction using a babel plugin? If not, it seems maybe the issue is specific to the integration with babel.

[jacobg]

Source map debugging used to work fine for me on Vue 2, but it suddenly stopped working on Chrome 120. I just verified that by comparing Chrome 119 and 120 debugging in BrowserStack. It makes no difference on Vue 2.6 or 2.7.

[RobCherry]

Source map debugging used to work fine for me on Vue 2, but it suddenly stopped working on Chrome 120. I just verified that by comparing Chrome 119 and 120 debugging in BrowserStack. It makes no difference on Vue 2.6 or 2.7.

I also encountered this. It is caused by a change to Chrome Dev Tools in 120 that skips scripts from /node_modules/ and /bower_components/ by default. https://developer.chrome.com/blog/new-in-devtools-120#default-regex

[thibaudsz]

Thanks @RobCherry this is what was causing the issue for me

[placid2000]

@RobCherry Thank you so much!