Webpack source maps for some .vue (and .ts) files no longer contain original code (sourcesContent) - vue.js

Question

Edit [23-7-2019]
After further research, I found that not ALL .vue files have this problem. Some do still show the original source code.
It looks like one of the loaders that is used, might be the culprit for the problems (with "vue-loader" as my first 'target').
In files that DO show the source code, the relevant part of the source map file looks like this:
Whereas the same part of the source map in the files without the source code, looks like this:
So for some reason, the "harmony default export" of the vue-loader seems to be missing for the latter type of files.
Previous issue text
Since a few days, the source maps for my .vue files no longer contain the original code (sourcesContent).
A number of source map files are generated by Webpack, but none of them contain the actual code: only minified or otherwise 'compressed' versions of the code, which are not very usable. They look like this:
The Typescript (.ts) files in my project, look almost correct, but still contain some minor forms of modification, e.g.:
What I have tried:
- I have searched Stackoverflow, and found a number of similar questions (e.g. like WebPack sourcemaps confusing (duplicated files)) with possible fixes, but none of them fixed my problem;
- I have compared my latest (Webpack) changes with that of about a week (and 2 weeks) ago, when all was working okay. And I have compared it also to a very
similar project that still produces correct source maps, including
for .vue files.
- I have tried various settings for the "devtool" setting in the Webpack config, but nothing helped.
- I am not using Uglify (which is mentioned a lot when people have a problem with source maps), so that cannot be the problem;
- I have tried updating a number of build related packages, so that they are equal to those of the project which is still working correctly, but the problem remains.
- I checked different browsers, but the problem occurs both in Chrome and Firefox (and I checked that their source map settings are set to 'on', which they have to be as the other project is working with the same settings). I even tried IE11, but that didn't help either.
My starting scripts in package.json look like this:
"build-watch": "webpack -d --watch true --config webpack.dev.config.js",
"build-release": "webpack -p --config webpack.production.config.js",
"build-dev": "webpack -d --config webpack.dev.config.js",
The devDependencies look like this:
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-typescript": "^7.3.3",
"#types/bootstrap": "^4.3.1",
"#types/jest": "^24.0.15",
"#types/jquery": "^3.3.30",
"#types/webpack": "^4.4.35",
"#vue/cli-plugin-e2e-cypress": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.2",
"#vue/cli-plugin-typescript": "^3.9.0",
"#vue/cli-plugin-unit-jest": "^3.9.0",
"#vue/cli-service": "^3.9.3",
"#vue/eslint-config-standard": "^4.0.0",
"#vue/eslint-config-typescript": "^4.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"assets-webpack-plugin": "^3.9.10",
"babel-loader": "^8.0.6",
"babel-preset-vue": "^2.0.2",
"cache-loader": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.1.0",
"cssnano": "^4.1.10",
"cypress": "^3.4.0",
"es6-promise": "^4.2.8",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"globule": "^1.2.1",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-increase-specificity": "^0.6.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"ts-jest": "^24.0.2",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"url-loader": "^2.0.1",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.36.1",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.6" },
And the most relevant parts of my Webpack development config (excluding stuff like those related to webfonts) are these:
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
const NODE_PATH = path.join(__dirname, "node_modules");
const CACHE_PATH = path.join(NODE_PATH, '.cache/vue');
const VUE_VERSION = require('vue/package.json').version;
const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
const bundleConfig = require('./bundles.config.js');
const buildId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
const config = {
entry: bundleConfig.entries,
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
exclude: [
path.resolve(__dirname, "wwwroot", "Content"),
path.resolve(__dirname, "src", "common")
],
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.css$/,
include: [
path.resolve(__dirname, "wwwroot", "Content"),
path.resolve(__dirname, "src", "common")
],
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
cacheDirectory: CACHE_PATH,
cacheIdentifier: [
'development',
webpack.version,
VUE_VERSION,
VUE_LOADER_VERSION
].join('|')
}
},
{
test: /\.tsx$/,
loaders: 'babel-loader',
include: /src/
},
{
test: /\.ts$/,
loaders: 'ts-loader',
include: /src/,
options: {
appendTsSuffixTo: [
/\.vue$/
]
}
}, ...
]
},
devtool: "cheap-module-eval-source-map",
resolve: {
extensions: [
'.js',
'.vue',
'.tsx',
'.ts'
],
alias: {
'~#': path.resolve('src'),
'vue$': 'vue/dist/vue.esm.js',
'bootstrap-vue$': 'bootstrap-vue/dist/bootstrap-vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
'Promise': 'es6-promise'
}),
new CleanWebpackPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new MiniCssExtractPlugin({ filename: "[name].css" }),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: false } }],
}
}),
new webpack.WatchIgnorePlugin([
/\.d\.ts$/
]),
new AssetsPlugin({
filename: 'webpack.assets.json',
path: bundleOutputDir,
prettyPrint: true,
metadata: { buildId: buildId }
})
],
stats: {
modules: false,
entrypoints: false,
children: false
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all"
}
}
}
} };
I have totally run out of clues, so if anyone can give some, that would be great!

Answer 1

In the end, it turned out to be a source maps caching issue...! Which seems like a "duh!" solution to the problem, but it is not, really.
Because, it turns out that Chrome is very persistent with the caching of the source maps (at least, so it seems to me).
Whenever I start debugging, I use the Debug option of Visual Studio 2019. Which will then launch a new Chrome instance to do the debugging/testing in. I always assumed that this was done, to make sure you were using a 'fresh' version of the browser (e.g. with an empty cache, and the like). It turns out that this does not apply to the source maps of this browser instance...!
I found out that caching was the problem, because I had a window open in my 'regular' Chrome, which was also set to the local development environment. And I decided to see how the source maps where shown there, more to sort of amuse myself and less because I thought that would lead to anything. And in that browser, the correct source maps were & are shown.
So I went back to my (still open) development instance of Chrome. And in that, I already had disabled the cache in the devtools, both in the settings, and via the checkbox on the network tab. But still the source maps remained cached. So I emptied the browser cache via the regular settings of Chrome. But still the source maps remained cached. I changed the settings in Visual Studio to open an incognito version of Chrome for debugging. And even now, I still see the incorrect/old source maps there (while they show up just fine in the regular browser instance)...
Very weird all of this, but at least I can now start working/debugging again!