How to configure Storybook to work with gatsby-theme-i18n ?

[JB Theard]

Gatsby Link does provide a specific config for to work in the context of Storybook.

But when switching to from gatsby-theme-i18n , Storybook build fails with the following error:

ModuleParseError: Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   return (
>     <ul>
|       {config.map((locale) => (
|         <li key={locale.code}>
    at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (11:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   return (
>     <Link
|       {...props}
|       to={localizedPath({
    at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (16:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   return (
>     <Router basepath={path} {...props}>
|       {children}
|     </Router>
    at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (12:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   if (isHash(href) || !isInternal(href) || isFile(href)) {
|     return (
>       <a {...props} href={href}>
|         {children}
|       </a>
    at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (9:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   children,
|   pageContext: { locale = defaultLang },
> }) => <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>

See reproductible repo here with minimum setup and latest packages versions.

[Maksim Amelchenko]

Add this to .storybook/main.js. Here we transpile gatsby-theme-i18n as well.

  webpackFinal: async config => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby|gatsby-theme-i18n)\/)/];
    config.resolve.alias['@reach/router'] = require.resolve(`@gatsbyjs/reach-router`);
    return config;
  }

[JB Theard]

Thanks @MaksimAmelchenko it does fix this indeed.