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!
