[webpack] [swc-loader] Unable to open actual source files with generated Source Maps

[phoenisx]

Hi

I am not sure if this is a webpack/swc issue, because source maps look fine, but I am not able to open the actual source file mapped with the transpiled code.

I am trying to set up webpack with swc-loader, everything's working fine. Even the sourceMappingURL is pointing to the correct location (at least relatively).

.js.map contains redirect URL to actual source to something like webpack:///src/... for webpack 4.x and webpack://{roodir}/src/... which I feel is correct (not sure though).

The problem is both the above source URLs are not opening, and I am getting the following error:

Error while fetching an original source: NetworkError when attempting to fetch resource.
Source URL: webpack://src/...

Webpack config has:

devtool: "source-map",
module: {
    rules: [
      {
        test: /\.m?jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "swc-loader",
            options: swcJSConfig
          }
        ]
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "swc-loader",
            options: swcTSConfig
          }
        ]
      },
    ]
}

where swcConfig is similar for both ts/js templates:

const CONFIG = {
  sourceMaps: true,
  test: ".m?jsx?$",
  jsc: {
    target: "es2016",
    loose: true,
    parser: {
      syntax: "ecmascript",
      jsx: true,
      dynamicImport: true
    },
    transform: {
      react: {
        runtime: "automatic",
        refresh: isDev,
      }
    }
  }
};

export default CONFIG;

The same issue happens with official swc examples as well https://github.com/swc-project/swc-loader/tree/master/example

Please help me out here, as I am trying to push swc tooling to our production, and without source mapping it would be hard to convince the team. 🙏🏾 🙇🏾

[phoenisx]

To add more details for the above, attaching a screenshot which shows the issue with https://github.com/swc-project/swc-loader/tree/master/example as well

[phoenisx]

I found this is happening due to swc / swc-loader, because replacing the loader with babel-loader for the example project mentioned above, made the source map work.

[phoenisx]

Adding link to webpack discussion for the same: webpack/webpack#14252.

This looks like a @swc/core issue

cc: @kdy1

[phoenisx]

Issue repro can be found here: https://github.com/phoenisx/swr-source-map-issue

[kdy1]

Sourcemap content being different is not an issue. Handling of sources can be the cause, but we need some investigation to fix it.

[sibelius]

is there a workaround for this?

[shay-alaluf]

try set
config.module.rules.push({
test: /.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: "swc-loader",
options: {
sourceMaps: false
}
}
});