I am running a react app with next.js and a standard redux store with sagas. The app has 3D elements associated with it and I am using React-three-fiber. Due to conflicts between next.js and some of those packages, the component housing the canvas element has to be imported dynamically. For reasons that I don't quite grasp, I cannot access the store inside any component that is a child of that dynamically imported component. I am not sure if this is due to the dynamic import or due to the canvas element of that component. Here is a layout of the app that describes the access issue.
- Page 1 - redux store access good
- component 1 - redux store access good
- component 2 - redux store access good
- component 3 - redux store access good
- child component 1 - redux store access good
- Page 2 - redux store access good
- dynamically imported component - redux store access good
- child of dynamically imported component - no store access
- dynamically imported component - redux store access good
The dynamically imported child is a canvas element and its children are React-Three-Fiber elements. I don't think that the canvas would affect the store, so the main issue seems to be that dynamically imported components are having some affect on the children's ability to access the store.
Whenever I try to access the store in the child of the dynamically imported component, it gives me the error that the component is not wrapped in a provider element.
There is a 'Page' as defined in the next.js context that has access to the store. Here is the line used to import a component dynamically.
const MyImpComp = dynamic(() => import('../components/MyImpComp'), { ssr: false });
Within that page, access to the store is fine using either the useDispatch or the useSelector hooks.
Within the dynamically imported component, access to the redux store is again fine using the same commands.
const items = useSelector(getItems);
However, any use of those hooks within the child components of MyImpComp results in an error telling me to wrap the component in a element - meaning that it cannot access the store and does not see one.