making esbuild treeshake with sideEffects:false

We have an Angular 18 application that used to be build with webpack. In our webpack.config.js file, we had this:

module.exports = (config, _options, targetOptions) => {
config.module.rules = [
{
test: /\.ts$/,
/**
* Declares all questionnaire ESM modules are safe to remove if completely unused.
* This is tested to be relatively safe for the questionnaire project,
* and adding new code that contains side effects should be avoided as much as possible.
*/
sideEffects: false,
},
...config.module.rules,
];


Now we moved to esbuild, and we want it to handle all files the same way - as they are of the nature sideEffects: false

How can I do that? I tried this way:

const sideEffectsPlugin = {
name: 'sideEffects',
setup(build) {
build.onLoad({ filter: /\.ts$/ }, async (args) => {
const source = await require('fs').promises.readFile(
args.path,
'utf8',
);
return {
contents: source,
loader: 'ts',
sideEffects: false, // Set sideEffects to false for .ts files
};
});
},
};


But it does not seem to work.

Thanks.

Continue reading...