(Workaround) Next.js without SWC plugin

[nandorojo]

Making an issue here for visibility.

Workaround

• yarn add moti@swc (This installs 0.21.1-alpha.6 at the time of writing)

• Add this at the top of pages/_app.tsx:

import { enableSwcHack } from 'moti'
enableSwcHack()

• Remove the Reanimated SWC plugin from next.config.js (until it's fixed).

Overview

I created a reproduction here of Reanimated not working with SWC: https://github.com/nandorojo/reanimated-next13-issue

Here's the Next.js issue: vercel/next.js#43886
And the Reanimated issue: software-mansion/react-native-reanimated#3971

Expected Behavior

Reanimated should work on Next.js. Due to its architecture, this requires an SWC plugin. However, the plugin is not working.

If you use Reanimated without a plugin, it doesn't break anything, but animations don't usually run. However, On the swc-hack branch, I figured out a way to get Reanimated working on Web without a plugin.

The result will not affect native, only Web (when enabled). The solution adds re-renders to power animations. It shouldn't be noticeable.

Steps To Reproduce

No response

Versions

Next.js 13, Reanimated 2.12.0, Moti `0.21.1-alpha.6`

Screenshots

Reproduction

https://github.com/nandorojo/reanimated-next13-issue

[nandorojo]

Another update is live at 0.21.1-alpha.9, which adds fixes for MotiPressable.

[nandorojo]

Hermes support was pulled in as well.

[chrisarts]

will this bring back the bundle size problem ?

[nandorojo]

It shouldn’t affect that. That all lies in how they tree shake Reanimated

[nandorojo]

I opened a PR to fix this at reanimated once and for all: software-mansion/react-native-reanimated#3997