`babel-plugin-optional-require` causes Cannot read property `registerEventHandler` of null

[ramonxm]

Describe the bug When I use KeyboardAwareScrollView in my application it crashes

Code snippet

  <KeyboardAwareScrollView keyboardShouldPersistTaps="always" bottomOffset={50}>
 // some code
     </KeyboardAwareScrollView> 

Repo for reproducing private project

Screenshots

Smartphone (please complete the following information):

• Desktop OS: MacOS
• Device: iPad Min
• OS: ios 17.6
• RN version: 0.75.2
• RN architecture: old
• JS engine: Hermes
• Library version: 1.13.1

Additional context Add any other context about the problem here.

[kirillzyusko]

@ramonxm which version of react-native-reanimated are you using?

[ramonxm]

@ramonxm which version of react-native-reanimated are you using?

v3.15.0

[kirillzyusko]

@ramonxm okay, this is weird 😐

Do you use workspaces by any chance? Is it possible to provide a reproduction example?

I'm using the same setup and everything works well in my example app 🤔

Maybe you can try to debug a little bit of why reanimated cannot be discovered? (just add console.log in that file and see path of the execution)

Do I correctly understand that before you were using 1.12.7 and you didn't have any problems, right?..

[ramonxm]

I'll try to simulate again, using only yarn in a react native cli project, the problem started precisely when I updated the react native and keyboard versions. I'll try to create a repo here with the error.

[kirillzyusko]

@ramonxm may I know how things are going on? 👀

[ramonxm]

@kirillzyusko sorry, I will try to create a repository now with the error

[ramonxm]

This is difficult, I even recreated everything again and still can't reproduce the error

[kirillzyusko]

@ramonxm well, very interesting! Really curious to know the setup that is causing the problem 🤔

[ramonxm]

@kirillzyusko I found the problem, the error occurs when I use this babel plugin: https://www.npmjs.com/package/babel-plugin-optional-require, without it the application works, that's why the problem occurs in this file: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/event-handler.js

[ramonxm]

This package is very old and was not added by me to this project, I believe I can remove it.

[kirillzyusko]

@ramonxm thanks! I also can reproduce this problem in my project.

I've tried many things to workaround/fix this problem, but https://www.npmjs.com/package/babel-plugin-optional-require always gets executed and it always replaces my require statements with throw new Error() 😡

I think here are two ways how you can fix this problem:

1️⃣ Just remove optional-require plugin

As you pointed out - if you don't use this package, then you can simply remove it - it'll solve all the problems.

2️⃣ Add whitelist property

If you can not remove this package, then you can add a list of exceptions that shouldn't be processed by this plugin:

module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: [
    [
      "optional-require",
      {
        whitelist: [
          "react-native-reanimated/src/core", // for REA > 3.13
          "react-native-reanimated/src/reanimated2/core", // for REA < 3.12
        ],
      },
    ],
    "react-native-reanimated/plugin",
  ],
};

I'm going to close that issue - unfortunately it's not something I can fix in my package at the moment. But I hope this comment can help someone to fix this problem if the error occurs in their projects!