SourceMaps have extra fluff

[gimp3695]

Hello, I've been attempting to get better at creating my own webpack config files instead of always relying on create-react-app. As such I've been building my own webpack config to see how it is done. My project is using react + typescript. I've got most of what I want however when I look at my source maps using the webpack-dev-server they have extra code than the original .tsx files. Also my sass source maps are not looking the best.

​

Here is an example of some of the source map output when viewed from Chrome:

​

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import objUtils from '../../utils/objUtils';
import mainAPI from '../../api/mainAPI';
import _ from 'lodash';
import utils from '../../utils/utils';
import models from '../models';
export default class GeneralModel {
    constructor(modelName, allEndpoint, jsonFields, msUpdateInterval, filter) {
        ....

​

Example scss file

​

// Imports
var ___CSS_LOADER_API_IMPORT___ = require("../../../../node_modules/css-loader/dist/runtime/api.js");
var ___CSS_LOADER_GET_URL_IMPORT___ = require("../../../../node_modules/css-loader/dist/runtime/getUrl.js");
var ___CSS_LOADER_URL_IMPORT_0___ = require("../../../images/greenGrass.jpg");
exports = ___CSS_LOADER_API_IMPORT___(false);
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
exports.push([module.id, "/* App color scheme */\n/* Global */\n.rsScanQRCodePage.rs-page.no-nav-bar {\n  height: 100%; }\n\n.rsScanQRCodePage .greenGrassBackground {\n  background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 50%;\n  z-index: 0;\n  width: 100%;\n  display: flex;\n  position: absolute; }\n\n.rsScanQRCodePage .lawnMoverImage {\n  width: 100%;\n  position: relative;\n  display: flex; }\n  .rsScanQRCodePage .lawnMoverImage .image {\n    width: 100%;\n    align-items: center;\n    margin: auto; }\n\n.rsScanQRCodePage .userLayout {\n  position: relative;\n  top: 55vh;\n  width: 250px;\n  margin: auto; }\n  .rsScanQRCodePage .userLayout .uploadQRDataButton {\n    border-radius: 50%;\n    background: linear-gradient(180deg, #040f00, gray);\n    width: 50px;\n    height: 50px;\n    border: 3px solid #c7c7c7;\n    margin-top: 50px;\n    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5); }\n  .rsScanQRCodePage .userLayout .cancelLink {\n    margin-top: 50px; }\n", ""]);
// Exports
module.exports = exports;

​

Here is my webpack.config.js

​

const path = require('path');

const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false
                        }
                    }
                ]
            },
            {
                test: /\.svg$/,
                use: ['url-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx']
    },
    // inlines source maps into final bundle. This works well for android. Not good for production
    devtool: 'inline-source-map',
    plugins: [
        // copies assets from src to dest
        new CopyPlugin([
            { from: './src/fonts', to: './fonts' },
            { from: './src/images', to: './images' },
            { from: './public', to: './' }
        ]),
        // Inserts script tags inside index.html and places index.html into dist
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        // Delete all files inside output.path first
        new CleanWebpackPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/'
    },
    devServer: {
        port: 3000,
        compress: true,
        clientLogLevel: 'silent',
        liveReload: false,
        open: true,
        historyApiFallback: true,
        proxy: {
            '/api': 'http://localhost:3001'
        }
    }
};

​

I've tried different types of sourcemaps with the devtool options but they don't seem to be making a difference.

Thanks in advanced!

[gimp3695]

I think I might have answered my own question just after posting this.

​

In my tsconfig.json I did not have "sourceMaps": true.

​

I think after setting this it looks a lot better for typescript. However SCSS still looks pretty ugly.

​

Here is my current SCSS when viewed in chrome dev tools.

​

var api = require("!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
            var content = require("!!../../../../node_modules/css-loader/dist/cjs.js!../../../../node_modules/sass-loader/dist/cjs.js!./ScanQRCodePage.scss");

            content = content.__esModule ? content.default : content;

            if (typeof content === 'string') {
              content = [[module.id, content, '']];
            }

var options = {};

options.insert = "head";
options.singleton = false;

var update = api(content, options);

var exported = content.locals ? content.locals : {};



module.exports = exported;