create-react-context | dead simple way to share states across react | Frontend Framework library

This keeps happening in create-react-app every time I add a package using yarn.

I have a shared (React) component library that I'm building. There is a PrivateRoute component that I am wanting to include. However, when I import the component from the module library into another application, I get an error:

Error: Invariant failed: You should not use outside a

The PrivateRoute component wraps the react-router/Route component with authentication logic and redirects unauthenticated requests to login:

component-library

I installed the same package for both my projects. That package(won't link, it's private one) has react-popper as dependency(which in order has create-react-context as dependency), so, when I run project one - everything is ok, but error appears for project two:

ERROR in ./node_modules/react-popper/lib/esm/Manager.js Module not found: Error: Can't resolve 'create-react-context' in '/../node_modules/react-popper/lib/esm'

After some investigation, I got that node_modules structure is different:

• for project one, all react-popper dependencies are saved in project one node modules, and local folder contain only warning package:

• for project two all react-popper dependencies saved in ../react-popper/node_modules local folder:

I've tried some common approaches like reinstalling node modules, clear cache and so on, but the structure is the same. Actually I had a thoughts about webpack and babel versions, but I don't think it can affect node_modules structure itself.

So the question is, which factors can affect it? What should I check?

NOTE: If I manually add create-react-context to project two, it works fine, but it's not a solution.

NOTE: I found out similar issue, but no suggestions there - Why does npm install packages in different directories?, im my case re-creating of yarn.lock also helps, but it's also doesn't look like a right way to solve it. Hope my description is more complete and will help to figure it out.

I have installed verdaccio and published a private pacakge to it and have set yarn registry to make requests to verdaccio proxy server. yarn makes request to the proxy server with some following requests to yarnpkg server. There are two issues here.

1. yarn is not supposed to make following requests for other packages when they are not a part of dependencies of desired package.
2. yarn is not supposed to make request to yarnpkg server when user explicitly sets the registry.

I have the following Snack Expo:

https://snack.expo.io/rJ4mAxhmV

Then, I tried to update the version of react-navigation to 3.0.9 and here is the result:

https://snack.expo.io/rkPpag2mV

Here are the only changes I applied to the initial project:

Text mode below:

I just started learning react with bootstrap by following a tutorial here:

react-bootstrap getting started

The installation step says :

In Expo React Native application, Following error occurred when executing react-native link after executing yarn add react-navigation native-base.

Warning displayed when adding React Navigation and Native-Base

Edit: Answer Below

I've followed both of these tutorials on youtube (currently there aren't too many) but none of them work for me, it sends me this error from the Provider in the index.js:

Tutorial 1: video and code

Tutorial 2: video and code

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

My code Context.js file: