Gatsby: Error during build: `WebpackError: Could not find "store"`

[quibaritaenperdresatrompe]

Description

I use redux to add a global state to my gatsby website. It works but the build failed:

WebpackError: Could not find "store" in either the context or props of "Connect(DefaulLayout)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(DefaulLayout)".

Environment

Gatsby version: 1.9.127
Node.js version: 9.2.0
Operating System: Ubuntu 17.10

File contents

I took this 2 files from https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux:

• gatsby-browser.js:

import React from 'react'
import { Router } from 'react-router-dom'
import { Provider } from 'react-redux'

import createStore from './src/state/createStore'

exports.replaceRouterComponent = ({ history }) => {
  const store = createStore()

  const ConnectedRouterWrapper = ({ children }) => (
    <Provider store={store}>
      <Router history={history}>{children}</Router>
    </Provider>
  )

  return ConnectedRouterWrapper
}

• gatsby-ssr.js:

import React from 'react'
import { Provider } from 'react-redux'
import { renderToString } from 'react-dom/server'

import createStore from './src/state/createStore'

exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
  const store = createStore()

  const ConnectedBody = () => (
    <Provider store={store}>
      {bodyComponent}
    </Provider>
  )

  replaceBodyHTMLString(renderToString(<ConnectedBody/>))
}

[m-allanson]

Hi @quibaritaenperdresatrompe, here's a few questions to try and narrow down the problem.

Can you try with the latest version of Gatsby (1.9.134)?

Does the gatsby develop command work, but the gatsby build command fails?

Does the using-redux example work on your machine?

Alternatively can you create a basic repo that demonstrates the issue?

[quibaritaenperdresatrompe]

Hi @m-allanson. Thanks for your answer !

I took the last version (1.9.138, perhaps I should use the 1.9.134 version but the 1.9.138 seems to be last one, isn't it ?) but I've the same result:

• the gatsby develop still works
• the gatsby build command still fails

And, the using-redux example works on my machine !

So, I set my repository (on GitLab) as public so you can take a look on it.

Thanks ! :v:

[m-allanson]

Ohh ok I think gatsby-plugin-glamor means you're running in to #2005. Thanks for creating the example repo :)

Until there's a better way of handling this, you'll probably need to manually reimplement the gatsby-plugin-glamor code in your gatsby-ssr.js. Check out the examples in the linked issue.

[quibaritaenperdresatrompe]

Great ! It works ! :tada:

I reimplement glamor in gatsby-ssr.js:

import { Provider } from 'react-redux'
import { renderStaticOptimized } from 'glamor/server'
import { renderToString } from 'react-dom/server'
import React from 'react'

import createStore from './src/state/createStore'

exports.replaceRenderer = ({
  bodyComponent,
  replaceBodyHTMLString,
  setHeadComponents,
}) => {
  const store = createStore()

  let { html, css, ids } = renderStaticOptimized(() =>
    renderToString(
      <Provider store={store}>
        {bodyComponent}
      </Provider>
    )
  )

  replaceBodyHTMLString(html)

  setHeadComponents([
    <style
      id='glamor-styles'
      key='glamor-styles'
      dangerouslySetInnerHTML={{ __html: css }}
    />,
    <script
      id='glamor-ids'
      key='glamor-ids'
      dangerouslySetInnerHTML={{
        __html: `
        // <![CDATA[
        window._glamor = ${JSON.stringify(ids)}
        // ]]>
        `,
      }}
    />,
  ])
}

But, first, I forgot to remove the gatsby-plugin-glamor from gatsby-config.js !
And, then, I have to add glamorous and use it like I use to do (not with the css props used by gatsby-plugin-glamor).
Details in this commit.

:arrow_right: The gatsby build command works ! Thank you ! :v:

[KyleAMathews]

Hmm yeah, really need to add the check described in #2005