SWC plugins not working when using Next.js' `transpilePackages`

[axeldelafosse]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 3.2.0
  pnpm: N/A
Relevant packages:
  next: 13.0.5
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

SWC transpilation

Link to the code that reproduces this issue

https://github.com/showtime-xyz/showtime-frontend/pull/1678

To Reproduce

Clone the repo and checkout the branch feature/show2-1348-upgrade-to-latest-nextfont.

In next.config.js, uncomment the line // ["react-native-reanimated-swc-plugin"], to enable the Reanimated SWC plugin.

Then:

yarn
cd apps/next
yarn dev

If you comment this line again, and run rm -rf .next && yarn dev it should work as expected.

Describe the Bug

It looks like the SWC transpilation fails when using the React Native Reanimated SWC plugin.

The error is happening when using Reanimated SWC plugin and transpiling react-native-reanimated with Next.js’ transpilePackages — but it’s also happening when transpiling with next-transpile-modules.

For what it's worth, it looks like the React Native for Web SWC plugin isn't working as expected neither when transpiling react-native with Next.js' transpilePackages.

Here is the Slack shared channel with the Showtime team, Software Mansion and @kwonoj: https://showtime-rq88331.slack.com/archives/C03GV20B4CF/p1670584145625319 where we discussed the SWC plugin for Reanimated and this issue.

Expected Behavior

The code should be transpiled and the plugins should work as expected.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[fdecampredon]

@axeldelafosse did you find a workaround ?

[axeldelafosse]

No :(

[nandorojo]

I faced the same thing, had to go back to next-transpile-modules

[nandorojo]

Even with next-tranpsile-modules, seems like I'm not able to use SWC plugins.

[nandorojo]

I created a reproduction here to show that this isn't working: https://github.com/nandorojo/reanimated-next13-issue

This is the error I get:

[nandorojo]

Judging by my reproduction’s error, it seems as though SWC isn’t transforming the reanimated package. It’s erroring at the line let i = 0.

[kdy1]

Investigation: next/dist/build/swc.transform() is not called at all for packages in transpilePackages.

List of transpiled files:

transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/next-dev.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/amp-dev.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/router.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/with-router.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/on-demand-entries-client.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/webpack-hot-middleware-client.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/dev-build-watcher.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/fouc.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/index.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/error-overlay/websocket.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router-context.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/router.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/querystring.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/head-manager.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/performance-relayer.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/route-announcer.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/page-loader.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/remove-base-path.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/has-base-path.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/on-recoverable-error.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/script.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/head-manager-context.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/runtime-config.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/image-config-context.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/hooks-client-context.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/mitt.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/app-router-context.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/utils.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/adapters.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/is-dynamic.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/pages/_error.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/pages/_app.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/is-plain-object.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/route-loader.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/normalize-trailing-slash.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/detect-domain-locale.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/add-locale.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/remove-locale.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/add-base-path.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/remove-trailing-slash.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/parse-relative-url.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/route-matcher.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/route-regex.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/format-url.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/parse-path.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/get-next-pathname-info.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/format-next-pathname-info.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/is-bot.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/compare-states.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/request-idle-callback.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/no-ssr-error.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/image-config.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/path-has-prefix.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/dev/error-overlay/format-webpack-messages.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/get-asset-path-from-route.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/page-path/denormalize-page-path.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/i18n/normalize-locale-path.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/head.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/portal/index.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/add-path-prefix.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/escape-regexp.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/remove-path-prefix.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/add-path-suffix.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/add-locale.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/client/trusted-types.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/side-effect.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/amp-context.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/amp-mode.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/page-path/normalize-path-sep.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/index.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/utils/warn-once.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/compiled/strip-ansi/index.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/pages/_app.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/pages/_app.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/pages/_document.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/pages/_error.js
transform undefined /Users/kdy1/projects/lab/reanimated-next13-issue/node_modules/next/dist/shared/lib/head.js

[nandorojo]

👀

[sourabhLX]

No error msg for me but Animations not working on web

app/next

"dependencies": {
    "@expo/next-adapter": "5.0.2",
    "app": "*",
    "next": "13.2.4",
    "raf": "^3.4.1",
    "setimmediate": "^1.0.5"
  },

package/app

"dependencies": {
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "moti": "latest",
    "nativewind": "2.0.9",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-redash": "^18.1.0",   // not working for web ether 
    "solito": "3.0.0"
  },

Is it related to the same issue or thair is a solution or workaround??

[jamesopti]

This is a huge blocker for us dropping babel in favor of SWC.

Is there a fix in the works? Or a proposed workaround?

[ashraf-gemini]

Second you on that @jamesopti ; we're in a similar situation.