Error: "Unable to resolve module `./InitialWindowSafeAreaInsets`

Question

I'm developing a project in React Native. I've finished the coding and after this, I have to install some dependencies such as react-native-screens, react-native-vector-icons, etc.

It appears to me: "Unable to resolve module ./InitialWindowSafeAreaInsets from node_modules\\react-native-safe-area-context\\src\\index.tsx. Below there is what appear in the Metro Bundler of my localhost:

LOGGED IN AS
INFO
16:02
Starting Metro Bundler on port 19001.
INFO
16:02
Tunnel ready.
ERROR
16:03
Unable to resolve "./InitialWindowSafeAreaInsets" from "node_modules\react-native-safe-area-context\src\index.tsx"
ERROR
16:03
Building JavaScript bundle: error

I know that I could simply install react-native-safe-area-context, but due the fact I haven't found any issue about this neither here nor in GitHub, I've preferred to be conservative and share with you the issue, instead of install the package and it becomes a snowball.

Maybe the solution is really install react-native-safe-area-context package, but I prefer to share before, because maybe anyone is being the same issue and could help with further information.

Later, I installed the react-native-safe-area-context package, and it remains the same error. How could I solve this issue?

Answer 1

This problem occurs with the following combinations:

• [email protected]
• [email protected]

Expo asks for [email protected], but please ignore it. Actually, you need @0.7.3.

(Expo send 'InitialWindowSafeAreaInsets', but @0.6.0 cannot receive it. @0.6.0 can only receive 'InitialSafeAreaInsets'. Who Moved My 'Window'?)

so, please try this way.

yarn add [email protected]

Answer 2

For some people met the issue must to change resolver in metro config file to have 'ts' extension ...

module.exports = {
  resolver: {
    /* resolver options */
    sourceExts: ['jsx','js','tsx', 'ts'] //add here
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};