[Bug]: The sideEffects package is not working with namespace import.

[Fitz6]

Version

Browsers:
    Chrome: 126.0.6478.127
    Edge: Chromium (126.0.2592.87)
  npmPackages:
    @rsbuild/core: 1.0.0-alpha.6 => 1.0.0-alpha.6

Details

// test.js
export const doSomething = () => {
  console.log('It works.')
}
window.doSomething = doSomething

// index.js with namespace import
import * as something from './test.js'

window.doSomething() // TypeError: window.doSomething is not a function

// index.js with side effect import
import './test.js'

window.doSomething() // It works.

Reproduce link

https://rsbuild.dev/guide/start/quick-start

Reproduce Steps

1. execute rsbuild dev
2. find the error message in the console

[SoonIter]

investigation

👍🏻 I used Rsdoctor loader analysis to debug this issue and it is awesome !!!

It was observed that the swc-loader with transform deleted the unused import *. The treeshaking feature of Rspack/webpack will help you analyze and retain sideEffects statements if there is no swc-loader.

If you use swc-loader or babel-loader with webpack/Rspack, you will encounter the same issue.

swc-playground

babel-playground

I haven't found an option to keep them at present

[Fitz6]

If you use swc-loader or babel-loader with webpack/Rspack, you will encounter the same issue.

webpack + babel-loader works fine. https://stackblitz.com/edit/webpack-webpack-js-org-oudeaz

webpack + swc-loader works the same. https://stackblitz.com/edit/webpack-webpack-js-org-y3dq3h

[SoonIter]

If you use swc-loader or babel-loader with webpack/Rspack, you will encounter the same issue.

Sorry, some information was ignored, based on "preset-typescript"

[Fitz6]

If you use swc-loader or babel-loader with webpack/Rspack, you will encounter the same issue.

Sorry, some information was ignored, based on "preset-typescript"

babel-loader with @babel/preset-typescript works fine as well.

I tested the effects of using Webpack with several different loaders.

// test.js
export const doSomething = () => {
  console.log('It works.')
}
window.doSomething = doSomething

// index.js with namespace import
import * as something from './test.js'

window.doSomething()

// index.ts with namespace import
import * as something from './test.js'

(window as any).doSomething()

Results:	Loader	Options	Entry	Result
babel-loader	presets: ['@babel/preset-typescript']	index.js	✔️
babel-loader	presets: ['@babel/preset-typescript']	index.ts	❌
swc-loader	jsc: { parser: { syntax: 'ecmascript' } }	index.js	✔️
swc-loader	jsc: { parser: { syntax: 'typescript' } }	index.js	❌
swc-loader	jsc: { parser: { syntax: 'typescript' } }	index.ts	❌
esbuild-loader	target: 'es2015'	index.js	✔️
esbuild-loader	target: 'es2015'	index.ts	❌

Based on the tests above, it can be observed that when transforming .ts files, all loaders remove the side effect function when using namespace import. When transforming .js files, they all work fine. However, SWC only works correctly when the jsc.parser.syntax is set to ecmascript, but it fails to handle TypeScript syntax. Setting jsc.parser.syntax to typescript results in the inability to preserve the side effect properly.

Unfortunately, in real-world projects, it is common to encounter a mix of TypeScript and JavaScript. It seems that SWC lacks the flexibility required for these tasks. Maybe I should create an issue for SWC. 😑