vuejs
TypeScript SourceMaps duplicate components files in browser devtools source
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.
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() {
}
}
I continue to have this problem with all of my vue applications. Does anyone have any experience with this issue?
I am getting this too, but it's only started recently and only seems to be affecting one file
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.
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.
