Gatsbyjs reach-router import error breaking site

user_17158541 0
Viewed 445

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 :)

npm gatsby html javascript
1 Answers

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

user_55853710
Related