Does tree shaking of barrel files with babel-swc-loader even work?

[mefjuu]

Describe the bug

Has anybody got tree shaking to work with the new @callstack/repack/babel-swc-loader?

As rspack docs says, modules cannot be converted to CJS to utilize tree shaking. However when I configure the @react-native/babel-preset in babel.config.js to do so:

  presets: [
    [
      'module:@react-native/babel-preset', { disableImportExportTransform: true },
    ],
  ],
  ...

bundler throws error:

  error: [Error [TypeError]: Cannot read properties of undefined (reading 'type')
      at Proxy.babelSwcLoader (/Users/m/project/node_modules/@callstack/repack/dist/loaders/babelSwcLoader/babelSwcLoader.js:111:32)]

I've also tried to use babelOverrides property instead and the error is gone, but there is still no tree shaking result.

      {
        test: /\.[cm]?[jt]sx?$/,
        type: 'javascript/auto',
        use: {
          loader: '@callstack/repack/babel-swc-loader',
          parallel: true,
          options: {
            lazyImports: true,
            babelOverrides: {
              presets: [
                ['module:@react-native/babel-preset', { disableImportExportTransform: true }],
              ],
            }
          },
        },
      },

System Info

"@callstack/repack": "5.2.2",
"react-native": "0.81.4",
"@react-native/babel-preset"

Re.Pack Version

5.2.2

Reproduction

https://github.com/mefjuu/repack-optimizations-test

Steps to reproduce

1. Clone the repo https://github.com/mefjuu/repack-optimizations-test
2. Run

     npm run bundle -- --entry-file ./index.js && cat build/generated/ios/index.bundle | grep "sernik"
   

3. The phrase "sernik" has been found in bundled file even though the Sernique.tsx file is not imported in App.tsx (however it's located in components/index.ts barrel file).

Ok, let's get aligned with that rspack docs says and:

1. Put { disableImportExportTransform: true } at module:@react-native/babel-preset config in babel.config.js
2. Run npm run bundle -- --entry-file ./index.js
3. Error: ... [Error [TypeError]: Cannot read properties of undefined (reading 'type') ...

[dannyhw]

please include a reproduction and the steps need to reproduce otherwise its much harder to help you

[mefjuu]

@dannyhw Reproduction added

[dannyhw]

Thanks @mefjuu I will take a look

[dannyhw]

Looks like the module type is missing when it reaches

node_modules/@callstack/repack/dist/loaders/babelSwcLoader/babelSwcLoader.js

if you patch the finalSwcConfig to be like

type: swcConfig?.module?.type ?? 'nodenext',

Then it does work. Need to see what the right default for module is though or why its not getting a module type

[jbroma]

@mefjuu thanks for the bug report & the repro, I've managed to verify that this is an issue within babel-swc-loader. To support the disableImportExportTransform, we will now default to es6 module type when transform-modules-commonjs babel plugin is not preset.

With this change in place, you can utilize treeshaking fully in the scenario from the repro :)

[mefjuu]

@jbroma Glad to hear that. Now it's working fine. Thanks!