TypeScript SourceMaps duplicate components files in browser devtools source

[FeistyMango]

Version

4.5.11

Environment info

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 14.15.1 - C:\Program Files\nodejs\node.EXE      
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 88.0.4324.150
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @fullcalendar/vue: ^5.5.0 => 5.5.0
    @types/vue-router: ^2.0.0 => 2.0.0
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.0
    @vue/babel-plugin-jsx:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.10
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.10
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.10
    @vue/cli-plugin-e2e-cypress: ~4.5.0 => 4.5.10
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.10
    @vue/cli-plugin-router: ~4.5.0 => 4.5.10
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.10
    @vue/cli-plugin-unit-jest: ^4.5.9 => 4.5.10
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.10
    @vue/cli-service: ~4.5.0 => 4.5.10
    @vue/cli-shared-utils:  4.5.10
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/test-utils: ^1.0.3 => 1.1.2
    @vue/web-component-wrapper:  1.2.0
    bootstrap-vue: ^2.21.2 => 2.21.2
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    jest-serializer-vue:  2.0.2
    portal-vue:  2.1.7
    typescript: ~3.9.3 => 3.9.7
    vue: ^2.6.11 => 2.6.12
    vue-class-component: ^7.2.3 => 7.2.6
    vue-eslint-parser:  7.3.0
    vue-functional-data-merge:  3.1.0
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.7
    vue-loader:  15.9.6 (16.1.2)
    vue-multiselect: ^2.1.6 => 2.1.6
    vue-observe-visibility:  0.4.6
    vue-phone-number-input: ^1.1.10 => 1.1.10
    vue-property-decorator: ^9.1.2 => 9.1.2 (8.5.1)
    vue-resize:  0.4.5
    vue-router: ^3.2.0 => 3.4.9
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
    vue-virtual-scroller:  1.0.10
    vuex: ^3.4.0 => 3.6.0
    vuex-class-modules: ^1.1.3 => 1.2.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Build a vue app with Typescript enabled along with source maps and hot reloading via npm run serve. Load the application and make a few changes that trigger a component to be hot reloaded in the browser.

What is expected?

I should have a single componet file with a single source map associated with it so that I can find said component and debug into it.

What is actually happening?

You should see the affected component file being repeated multiple times with source maps mapping to what appears to be the deltas being sent back by the hot reloading process.

[FeistyMango]

Vue.config

module.exports = {
  outputDir: '../wwwroot',
  configureWebpack: {
    devServer: {
      watchOptions: {
        ignored: ['tests'],
      }
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": false,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "cypress"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Example of the issue:

Output of each file listed from image:

TheDashboard.vue?4b99

import { render, staticRenderFns } from "./TheDashboard.vue?vue&type=template&id=70e3a247&"
import script from "./TheDashboard.vue?vue&type=script&lang=ts&"
export * from "./TheDashboard.vue?vue&type=script&lang=ts&"

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

)

/* hot reload */
if (module.hot) {
  var api = require("C:\\zimmer\\bluecloudweb\\BlueCloud.Web\\mfe\\node_modules\\vue-hot-reload-api\\dist\\index.js")
  api.install(require('vue'))
  if (api.compatible) {
    module.hot.accept()
    if (!api.isRecorded('70e3a247')) {
      api.createRecord('70e3a247', component.options)
    } else {
      api.reload('70e3a247', component.options)
    }
    module.hot.accept("./TheDashboard.vue?vue&type=template&id=70e3a247&", function () {
      api.rerender('70e3a247', {
        render: render,
        staticRenderFns: staticRenderFns
      })
    })
  }
}
component.options.__file = "src/pages/TheDashboard.vue"
export default component.exports

TheDashboard.vue?ce3b

export * from "-!../../node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"372bf668-vue-loader-template\"}!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TheDashboard.vue?vue&type=template&id=70e3a247&"

TheDashboard.vue?f286

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c("TheSmartFilter", {
        attrs: { items: _vm.smartFilterItems },
        model: {
          value: _vm.selectedFilterItem,
          callback: function($$v) {
            _vm.selectedFilterItem = $$v
          },
          expression: "selectedFilterItem"
        }
      }),
      _c("keep-alive", [_c("router-view")], 1)
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

export { render, staticRenderFns }

TheDashboard.vue?130f (The proper source mapped file)

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class TheDashboard extends Vue {
  patientsSummary: PatientsSummaryResponse | null = null;

  get smartFilterItems() {
    return [
    ];
  }

  get selectedFilterItem(): SmartFilterItem {
    return (
    );
  }

  async activated() {
  }
}

[FeistyMango]

I continue to have this problem with all of my vue applications. Does anyone have any experience with this issue?

[Sporradik]

I am getting this too, but it's only started recently and only seems to be affecting one file

[smimon]

Also started happening for me a couple of weeks ago, on random files, and goes away sometimes after editing the component and hot reloading it.

[aloiseau17]

Same for me on dev and production mode using devtool: 'source-map'

[WormGirl]

Same for me, if use debugger, cannot into debugger correctlly.

[WormGirl]

I find if i refresh the page which has debugger, can not into debugger and the file will jump many times. if not first into debugger page, then can into debugger.

[necpoctt]

Same for me, it's any update?