1

I am a Gatsby newbie and I'm following this tutorial: https://www.gatsbyjs.com/docs/creating-plugins/ to learn to create a gatsby local plugin using react-intl. I put the plugin in the plugins folder in the root of the project.

This is the demo code of the plugin (Demo Project Repo: https://github.com/85Ryan/gatsby-local-plugin-demo.git)

// ./src/wrap-page-element.js
import * as React from 'react'
import { IntlProvider } from 'react-intl'

const message = {
  welcome: 'Welcome',
  home: 'Home',
}

const wrapPageElement = ({ element }) => {
  const locale = 'en'
  return (
    <IntlProvider locale={locale} key={locale} messages={message}>
      {element}
    </IntlProvider>
  )
}

export { wrapPageElement }


// gatsby-browser.js
export { wrapPageElement } from './src/wrap-page-element'

// gatsby-ssr.js
export { wrapPageElement } from './src/wrap-page-element'

When I build the Gatsby site, it crashes with the error WebpackError: [React Intl] Could not find requiredintlobject. <IntlProvider> needs to exist in the component ancestry.

Error Screenshot

But when I publish the plugin to npm, it works fine.

Can anyone help me to find where my problem is?

Thanks!

85Ryan
  • 115
  • 2
  • 8

1 Answers1

1

You are re-exporting wrapPageElement a second time in your file:

// gatsby-browser.js
export { wrapPageElement } from './src/wrap-page-element'

This replaces the earlier export that included <IntlProvider />.

coreyward
  • 77,547
  • 20
  • 137
  • 166
  • Hi, Thanks! Can you explain in more detail? I don't understand too much... – 85Ryan Mar 11 '21 at 07:50
  • There is only a single export. You're exporting two different things as that export. It's like having two 1st place race winners. There are no ties here. You can either update your code to include `` in the `wrapPageElement` export in the `./src/wrap-page-element` file, or if you're not using that component, you can drop the line I highlighted in my answer. – coreyward Mar 11 '21 at 14:22