[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. 🙏🏾 🙇🏾

[alexander-akait]

Please provide reproducible test repo

[phoenisx]

Thanks for a quick response @alexander-akait

I have uploaded a minimal repro here https://github.com/phoenisx/swr-source-map-issue

Anyways I have figured out the Source Map is working properly with babel-loader but not with swc-loader, even though the generated .js.map is very similar to each other, at least in terms of which source file they should point.

There's a huge difference in mappings property in .js.map generated by the two of them.

[alexander-akait]

Looks like source maps broken, chrome generate weird error message
@kdy1 friendly ping