Unable to use ESBuild instead of babel-loader in webpack config

[sahajarora1286]

Hi,

I have a React Native Super App that leverages Re.Pack. I have webpack configs for all apps in the project (monorepo).

Currently they're set up to use babel-loader for transpiling js/ts/jsx/tsx files as well as certain node_modules to overcome the ESM / CJS problem.

The apps have very minimal scaffolding code in them, and yet it takes a long time to compile them (on a fast M1 Macbook Pro).

I read an article by repack where it suggested using ESBuild to speed up webpack's performance.

This is the webpack rules config (partial) I have with ESBuild which doesn't seem to be working:

        {
          test: /\.[jt]sx?$/,
          include: [
            /node_modules(.*[/\\])+react/,
            /node_modules(.*[/\\])+@react-native/,
            /node_modules(.*[/\\])+@react-navigation/,
            /node_modules(.*[/\\])+@react-native-community/,
            /node_modules(.*[/\\])+expo/,
            /node_modules(.*[/\\])+pretty-format/,
            /node_modules(.*[/\\])+metro/,
            /node_modules(.*[/\\])+abort-controller/,
            /node_modules(.*[/\\])+@callstack\/repack/,
            /node_modules(.*[/\\])+redux/,
            /node_modules(.*[/\\])+react-redux/,
            /node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit/,
            /node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit\/query/,
            /node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit\/query\/react/,
          ],
          use: 'esbuild-loader',
          options: {
            // JavaScript version to compile to
            target: 'es2015',
          },
        },
        {
          // Match `.js`, `.jsx`, `.ts` or `.tsx` files
          test: /\.[jt]sx?$/,
          exclude: [/node_modules/],
          loader: 'esbuild-loader',
          options: {
            // JavaScript version to compile to
            target: 'es2015',
          },
        },
        /**
         * This loader handles all static assets (images, video, audio and others), so that you can
         * use (reference) them inside your application.
         *
         * If you wan to handle specific asset type manually, filter out the extension
         * from `ASSET_EXTENSIONS`, for example:
         * ```
         * Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')
         * ```
         */
        {
          test: Repack.getAssetExtensionsRegExp(
            Repack.ASSET_EXTENSIONS.filter(
              (ext) => ext !== 'svg' && ext !== 'ico'
            )
          ),
          use: {
            loader: '@callstack/repack/assets-loader',
            options: {
              platform,
              devServerEnabled: Boolean(devServer),
              /**
               * Defines which assets are scalable - which assets can have
               * scale suffixes: `@1x`, `@2x` and so on.
               * By default all images are scalable.
               */
              scalableAssetExtensions: Repack.SCALABLE_ASSETS,
            },
          },
        },
]

This webpack config is of a micro-app that gets loaded (via module-federation) lazily at runtime by the host app when the user visits a certain page in the host app.

The micro-app fails to compile with the following error:

✖ [15:46:16.887Z][LoggerPlugin] 

✖ [15:46:16.892Z][DevServer] Worker stopped with exit code 0 {
  reqId: 'req-1',
  err: {
    type: 'Error',
    message: 'Worker stopped with exit code 0',
    stack: 'Error: Worker stopped with exit code 0\n' +
      '    at Worker.<anonymous> (/project/apps/app1/node_modules/@callstack/repack/dist/webpack/Compiler.js:119:28)\n' +
      '    at Worker.emit (node:events:517:28)\n' +
      '    at [kOnExit] (node:internal/worker:289:10)\n' +
      '    at Worker.<computed>.onexit (node:internal/worker:209:20)'
  }
} 

ℹ [15:46:16.894Z][DevServer] Worker stopped with exit code 0 {
  reqId: 'req-1',
  res: { statusCode: 404 },
  err: {
    type: 'NotFoundError',
    message: 'Worker stopped with exit code 0',
    stack: 'NotFoundError: Worker stopped with exit code 0\n' +
      '    at Object.notFound (/project/node_modules/@fastify/sensible/lib/httpErrors.js:37:12)\n' +
      '    at _Reply.notFound (/project/node_modules/@fastify/sensible/index.js:50:42)\n' +
      '    at Object.handler (file:///project/node_modules/@callstack/repack-dev-server/dist/plugins/compiler/compilerPlugin.js:66:22)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
    status: 404,
    statusCode: 404,
    expose: true
  }
} 

ℹ [15:46:16.896Z][DevServer] GET 404 /app1.container.bundle?platform=android request completed { responseTime: 438.90325021743774 } 

Any help on this will be greatly appreciated, as using babel-loader seems to be way too slow for local development.

Thanks in advance!

UPDATE:

After changing the rules in webpack to:

{
          test: /\.[jt]sx?$/,
          include: [
            /node_modules(.*[/\\])+react\//,
            /node_modules(.*[/\\])+react-native/,
            /node_modules(.*[/\\])+@react-native/,
            /node_modules(.*[/\\])+react-freeze/,
            /node_modules(.*[/\\])+@react-navigation/,
            /node_modules(.*[/\\])+@react-native-community/,
            /node_modules(.*[/\\])+expo/,
            /node_modules(.*[/\\])+pretty-format/,
            /node_modules(.*[/\\])+metro/,
            /node_modules(.*[/\\])+abort-controller/,
            /node_modules(.*[/\\])+@callstack\/repack/,
            /node_modules(.*[/\\])+@callstack[/\\]repack/, // For Windows
            /node_modules(.*[/\\])+immer/,
            /node_modules(.*[/\\])+redux/,
            /node_modules(.*[/\\])+react-redux/,
            /node_modules(.*[/\\])+reselect/,
            /node_modules(.*[/\\])+@reduxjs\/toolkit/,
            /node_modules(.*[/\\])+@reduxjs[/\\]toolkit/, // For Windows
            /node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit/,
            /node_modules(.*[/\\])+react-error-boundary/,
          ],
          use: {
            loader: "esbuild-loader",
            options: {
              target: "es2015"
            }
          }
        },
        {
          // Match `.js`, `.jsx`, `.ts` or `.tsx` files
          test: /\.[jt]sx?$/,
          exclude: [/node_modules/],
          loader: 'esbuild-loader',
          options: {
            // JavaScript version to compile to
            target: 'es2015',
          },
        }

I get the following transpilation errors for the node_modules:

Transform failed with 1 error:
/apps/host/node_modules/react-native/src/private/webapis/dom/geometry/DOMRectReadOnly.js:19:7: ERROR: Unexpected "interface"

Transform failed with 1 error:
/apps/host/node_modules/react-native/src/private/webapis/dom/geometry/DOMRect.js:17:30: ERROR: Expected "}" but found "DOMRectLike"

Transform failed with 1 error:
/apps/host/node_modules/react-native/src/private/specs/modules/NativeRedBox.js:11:12: ERROR: Expected "from" but found "{"

Transform failed with 1 error:
/node_modules/@callstack/repack/node_modules/react-native/index.js:14:7: ERROR: Unexpected "typeof"

And many more like these...

[jbroma]

Hi @sahajarora1286,

We could probably get to the bottom of this, but we will release a Re.Pack 5 alpha very soon and in there you will be able to utilize Rspack with SWC which should be even faster than ESBuild. Nonetheless, if you figure this out, please leave a note so others might see it, thanks!

[jbroma]

Hi @sahajarora1286, for the moment the only migration guide is available in the release notes:
https://github.com/callstack/repack/releases/tag/%40callstack%2Frepack%405.0.0-alpha.0

We hope to have the full documentation by the time we proceed with the stable release!

[sahajarora1286]

Thanks @jbroma ! Is the idea behind this to migrate to Rspack in order to leverage swc and faster builds ?
Or can we still stick with Webpack and leverage swc for faster transpilation ?
Also, does Rspack support Module Federation ?

[sahajarora1286]

I tried migrating from Webpack to Rspack. One of the migration steps is to use resolve.tsconfig: {} instead of using plugins: [new TsconfigPathsPlugin()],.

Using tsconfig, when I start the dev server via react-native webpack-start cli, I get the following error:

[16:27:17.542Z][DevServer] Server listening at http://127.0.0.1:8081 
ℹ [16:27:17.543Z][DevServer] Starting build for platforms: ios, android 
Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues
Message:  Cannot start a runtime from within a runtime. This happens because a function (like `block_on`) attempted to block the current thread while the thread is being used to drive asynchronous tasks.
Location: crates/rspack_binding_options/src/options/raw_devtool.rs:99

Backtrace omitted.

Run with RUST_BACKTRACE=1 environment variable to display it.
Run with RUST_BACKTRACE=full to include source snippets.
Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues

Any idea how to resolve this ?

[jbroma]

Thanks @jbroma ! Is the idea behind this to migrate to Rspack in order to leverage swc and faster builds ? Or can we still stick with Webpack and leverage swc for faster transpilation ? Also, does Rspack support Module Federation ?

You could you use both actually! But to leverage swc in webpack you would need to add swc-loader . SWC on its own doesnt bring much improvement though - Rspack improves on so many other things that make it fast. Rspack supprts MF fully, and we will support MF2 in Re.Pack soon (should be there for the stable release)

I tried migrating from Webpack to Rspack. One of the migration steps is to use resolve.tsconfig: {} instead of using plugins: [new TsconfigPathsPlugin()],.

Using tsconfig, when I start the dev server via react-native webpack-start cli, I get the following error:

[16:27:17.542Z][DevServer] Server listening at http://127.0.0.1:8081 
ℹ [16:27:17.543Z][DevServer] Starting build for platforms: ios, android 
Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues
Message:  Cannot start a runtime from within a runtime. This happens because a function (like `block_on`) attempted to block the current thread while the thread is being used to drive asynchronous tasks.
Location: crates/rspack_binding_options/src/options/raw_devtool.rs:99

Backtrace omitted.

Run with RUST_BACKTRACE=1 environment variable to display it.
Run with RUST_BACKTRACE=full to include source snippets.
Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues

Any idea how to resolve this ?

Feel free to open an issue and provide a repro, the alpha release for cases like this where we need to figure some scenarios like this out :)

[sahajarora1286]

Sounds good, I'll open a separate issue for this. Thanks ! :)