Gatsby Local Plugin Build Crash

[85Ryan]

Hi, guys!

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.

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

Can anyone help me to find where my problem is?

Thanks!

Originally posted by @85Ryan in https://github.com/gatsbyjs/gatsby/discussions/30139

[insecrez]

Hey there,

The intlProvider is a most known problem, you can do these stuffs :-

1. This solution to fix this problem for me was to make sure to mount your test file with i18n every time you need to mount the component inside your jest tests. Here is an example:

it('set the value to 4 if changed value is not a number', () => {
  const wrapper = mountWithTestFileI18N(<Component {...props} />);
  wrapper.find('.form-input').simulate('change', { target: { value: 'tt' } });
  wrapper.find('.form-input').simulate('blur');

  expect(wrapper.find('.form-input').props().value).toBe(4);
});

Also, You need to make sure to follow this mounting formula for every jest test. You should have your mounting function inside your jestsetup.js file. Here is an example of that:

function mountWithIntl(node, intlKeys, formatKeys, { context, childContextTypes } = 
    {}) {
  const { intl } = getIntlContext(intlKeys, formatKeys);
  return mount(nodeWithIntlProp(node, intl), {
    context: { ...context, intl },
    childContextTypes: { ...childContextTypes, intl: intlShape },
  });
}

See, being a coder, if it works let it work with npm, rest this should mitigate the problems.

Thank You. And if this solves, then you can follow back if possible.