Gatsbyjs reach-router import error breaking site-CodePudding

I was working on my Gatsby project and tried adding the React Cookie Consent package. After installing it and trying to implement it, my site broke down, proving me with this error:

   warn ./.cache/root.js
    Attempted import error: 'BaseContext' is not exported from '@gatsbyjs/reach-router' (imported as 'BaseContext').

I can't seem to find a fix, nor do I know why it is happening. Localhost is throwing me this error:

_gatsbyjs_reach_router__WEBPACK_IMPORTED_MODULE_2__.BaseContext is undefined

Any help is welcome! Thank you :)

CodePudding user response：

Upon trying deleting the cache folder by running:

gatsby clean

If the issue persist, try bypassing the SSR limitation by adding the following to your gatsby-node.js:

exports.onCreateWebpackConfig = ({actions, loaders, stage}) => {
    if (stage === "build-html") {
        actions.setWebpackConfig({
            module: {
                rules: [
                    {
                        test: /react-cookie-consent/,
                        use: loaders.null(),
                    },
                ],
            }
        })
    }
};

Or using a dynamic import:

useEffect(() => {
  (async () => {
    const { getCookieConsentValue, Cookies } = await import('react-cookie-consent')

    getCookieConsentValue('test')
    Cookies.get()
  })()
}, [])

You can check for further approaches at: https://github.com/Mastermindzh/react-cookie-consent/issues/136