I would like to see on browser original source code (in development environment) for debug.

I'm having some problem with sourcemaps.

For example in this question I'll use the source code of a React component src/DefaultLoadingComponent.js:

const DefaultLoadingComponent = ({
    SkeletonProps = {}
}) => {

const classes = makeStyles(themeMaker)();    

return (       
    <Skeleton 
        animation="pulse" 
        variant="rect" 
        height={40} 
        className={classes.rounded5}
        {...SkeletonProps}
    />
)}

Using

devtool: "source-map"

File with .map extension is created under dist folder, in browser I can't see source files, so I'm not able to debug.

Inside dist/main.js.map I can see source code as expected.

const DefaultLoadingComponent = ({\n    SkeletonProps = {}\n}) => {\n\n    const classes = makeStyles(themeMaker)();    \n\n    return (       \n        <Skeleton \n            animation=\"pulse\" \n            variant=\"rect\" \n            height={40} \n            className={classes.rounded5}\n            {...SkeletonProps}\n        />\n    )

I get the same result using:

devtool: false,
plugins: [new webpack.SourceMapDevToolPlugin({
    filename: '[name].js.map',
    publicPath: absolute_url_to_dist_folder
})]

Using

devtool: "eval-source-map"

File with .map extension is not created under dist folder, in browser I can see transpiled files under /top/webpack-internal://. The content depends on babel-loader configuration or .babelrc content.

Here is devDependencies related to babel in package.json:

1. "@babel/core": "^7.14.6"
2. "@babel/plugin-proposal-class-properties": "^7.14.5",
3. "@babel/preset-env": "^7.14.5",
4. "@babel/preset-react": "^7.14.5",
5. "babel-loader": "^8.2.2"

Here is .babelrc file content:

{
"presets": [
    [ 
        "@babel/preset-env", {
            "modules": "auto",
            "targets": {
                "browsers": [
                    "last 2 Chrome versions",
                    "last 2 Firefox versions",
                    "last 2 Safari versions",
                    "last 2 iOS versions",
                    "last 1 Android version",
                    "last 1 ChromeAndroid version",
                    "ie 11"
                ]
            }
        }
    ],
    ["@babel/preset-react"]
],
"compact" : "auto",
}

On browser under top/webpack-instal://src/DefaultLoadingComponent.js I get:

var DefaultLoadingComponent = function DefaultLoadingComponent(_ref) {
  var _ref$SkeletonProps = _ref.SkeletonProps,
      SkeletonProps = _ref$SkeletonProps === void 0 ? {} : _ref$SkeletonProps;
  var classes = (0,_mui_styles__WEBPACK_IMPORTED_MODULE_2__.default)(_lib_theming__WEBPACK_IMPORTED_MODULE_1__.default)();
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_mui_material_Skeleton__WEBPACK_IMPORTED_MODULE_3__.default, _extends({
    animation: "pulse",
    variant: "rect",
    height: 40,
    className: classes.rounded5
  }, SkeletonProps));
};

Webpack version is: 5.39.0, here is the content of webpack.config.js:

{
    context: __dirname,
    entry: {main: './src/index.js'},
    output: {
        path: path.resolve(
            __dirname,
           '../dist',
        ),
        filename: '[name].js',
        publicPath: '/',
        library: 'MyLib',
        
    },
    devtool:'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                },
                exclude: path.resolve(__dirname, 'node_modules/'),
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
            {
                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: /\.(png|j?g|svg|gif)?$/,
                loader: 'file-loader',
                options: {
                    publicPath:'/wp-content/plugins/myplugin/lib/dist' 
                },
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin({}),           
    ],
}

Any way to debug on not transpiled files on browser?

CodePudding user response：

All configurations was fine. Chrome had Javascript source maps not enabled.

Now webpack is configured in this way:

devtool: mode === 'development'
            ? 'eval-cheap-module-source-map'
            : 'source-map',

Source files are under webpack://MyLib/./src/