React Native - Unable to resolve module AccessibilityInfo

Question

I recently started to receive the following error on my react native mobile application.

    None of these files exist:
      * node_modules/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo(.native|.native.jsx|.jsx|.native.js|.js|.native.ts|.ts|.native.tsx|.tsx|.native.cjs|.cjs|.native.json|.json)
      * node_modules/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo/index(.native|.native.jsx|.jsx|.native.js|.js|.native.ts|.ts|.native.tsx|.tsx|.native.cjs|.cjs|.native.json|.json)
    
  12 | 
  13 | // Components
> 14 | import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
     |                                       ^
  15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
  16 | import typeof Button from './Libraries/Components/Button';
  17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';

It doesn't break my application and I can continue to use ok. However, ideally, I want to resolve this bug.

I tried deleting node_modules, Pods and installing them from scratch but that didn't fix the problem. I've also tried running npx react-native start --reset-cache but it didn't have any effect either.

Answer 1

The import typeof ... is a flow statement, not a typescript statement.

This problem probably relates to your babel configuration. To transpile flow into javascript, you can either pre-prcoess using remove-flow-types npm module, or you can configure babel to process the flow into your preferred version of pure javascript. Babel Presets that do this include @babel/preset-flow, so your .babelrc might start with

{
  "presets": [
    "@babel/preset-flow"
  ],
...
...

There are other babel presets that include flow processing, such as the one used by nx's react-native plugin when generating an application project. This nx plugin generates a new project with babel.config.json containing:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

I came across this problem when trying to add include some react-native components into my nx react project (as opposed to an nx react-native project), which sent me down a rabbit hole analysing why I was getting this error. When I first saw the line of code causing the error, I tghought "Why is a typescript typeof statement in a *.js file?", as I knew nothing about flow (other than Microsoft have now stopped using it, and are migrating to TypeScript). I have not fixed my problem (yet), but I want to share what I learned so far.

The use of babel.config.json also shows there are several ways to configure your babel - I have shown two here: .bablerc file, and babel.config.json file.

The problem is how to preserve all of your other babel config, while adding in the processing of flow. This is a problem that will depend on your specific setup.