web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
9.2k stars 537 forks source link

[Bug]: bundle `modern-module` with css import stmt: incorrect webpack module map invoking #7642

Open PupilTong opened 3 weeks ago

PupilTong commented 3 weeks ago

System Info

System: OS: macOS 14.5 CPU: (10) arm64 Apple M1 Max Memory: 756.38 MB / 64.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.3.0 - ~/.local/state/fnm_multishells/97934_1722324495991/bin/node npm: 10.8.1 - ~/.local/state/fnm_multishells/97934_1722324495991/bin/npm pnpm: 9.3.0 - ~/.local/state/fnm_multishells/97934_1722324495991/bin/pnpm Browsers: Chrome: 127.0.6533.120 Safari: 17.5 npmPackages: @rspack/cli: 1.0.0-beta.5 => 1.0.0-beta.5 @rspack/core: 1.0.0-beta.5 => 1.0.0-beta.5

Details

src file:

export const a = 1;
import "./index.css";

configuration:

{
  entry: {
    main: './shell-project/deps/index.ts',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'www', 'deps'),
    library: {
      type: "modern-module",
    },
    module:true,
    scriptType:'module',
    chunkFormat:'module'
  },
  // mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        type: 'css/auto',
      },
      {
        test: /\.tsx$|\.ts$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            sourceMap: true,
            jsc: {
              parser: {
                syntax: 'typescript',
                jsx: true,
              },
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },  
  optimization: {
    minimize: false,
  },  
  experiments: {
    css:true,
    outputModule: true,
  },
};

result:

image image

Reproduce link

No response

Reproduce Steps

provided in the Detail part.

PupilTong commented 3 weeks ago

Actually using a css file as an entry could reproduce it too.

fi3ework commented 3 weeks ago

Just tested the reproduction, this will happen not only with module-module, but also with module, and will happen in webpack as well.