I'm a beginner in React as well as saga, but I am working on 2 projects that require the same module. The project is created using the cra-boilerplate template: [https://github.com/react-boilerplate/react-boilerplate-cra-template][CRA Boilerplate]
Now I have the main module, let's call it the Parent1 module and this is exactly the same as the repo in the link attached. And then I have the common module, let's call it Child module which I intend to make an npm library out of.
Parent1 module has store configured and provided in the react-redux Provider component in the index page.
Child module is using useInjectReducer and useInjectSaga to add reducer and saga functions to the store asynchronously (when the component gets loaded).
So far so good, but... when I add the Child module as a local dependency to the Parent1 module and import it inside the Home Page as a component, it gives me the following errors:
Uncaught TypeError: Cannot read properties of null (reading 'useContext')
at useContext (react.development.js:1562:1)
at useReduxContext (useReduxContext.js:21:1)
at useStore (useStore.js:20:1)
at useInjectReducer
Warning: Invalid hook call. Hooks can only be called inside
of the body of a function component... (the rest of the common Hooks tips...)
Now, I know what you are thinking, that I'm too stupid and have broken one of the Rule of Hooks, but... I also created a temporary setup in the Child module's project which is not included in the library after compiling. Basically it has an index file and an App.jsx file, the index file has the Provider similar to the Parent1 module and the first route is the default '/' which loads the App component with the Child module inside it return block.
All forms of criticism are welcome, from grammar to framing of this question to "there's a better way than this you know."