[gatsby-plugin-image] Module parse failed: Unexpected token

[joshuaavalon]

I am getting the following error after upgrade to Gatsby v3 and migrate to gatsby-plugin-image.

success run page queries - 0.027s - 3/3 111.96/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (5:9)

File: node_modules\gatsby-plugin-image\gatsby-browser.js:5:9

failed Building development bundle - 10.627s
ERROR in ./node_modules/gatsby-plugin-image/gatsby-browser.js 5:9
Module parse failed: Unexpected token (5:9)
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
|
| export function wrapRootElement({ element }) {
>   return <LaterHydrator>{element}</LaterHydrator>
| }
 @ ./.cache/api-runner-browser-plugins.js 5:10-74
 @ ./.cache/api-runner-browser.js 4:16-55
 @ ./.cache/app.js 11:0-65 27:0-70 31:20-29 44:0-14 96:19-28 127:8-17 27:0-70

I am able to run the starter without any error, but upgrading my current site does not work.

If I remove gatsby-plugin-image or remove content in node_modules/gatsby-plugin-image/gatsby-browser.js, the build also work.

In node_modules/gatsby-plugin-image/gatsby-browser.js, the code is JSX but Webpack does not seems to handle it correctly.

import React from "react"
import { LaterHydrator } from "."

export function wrapRootElement({ element }) {
  return <LaterHydrator>{element}</LaterHydrator>
}

My repository is https://gitlab.com/joshua-avalon/blog/joshua-avalon-blog/-/tree/v2.

[joshuaavalon]

It is actually a bug with npm@7 workspace with gatsby. See #29979.