ModuleParseError: Module parse failed: Unexpected token (17:2)

[t2ca]

I have recently experienced the following error during gatsby develop after upgrading theme-ui to v0.13.1 inside my Gatsby theme.

  ModuleParseError: Module parse failed: Unexpected token (17:2)
  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 const wrapRootElement = ({ element }) => (
  >   <WrapRootElement element={element} />
  | )
  |

This was never an issue with v0.12 or any other previous versions.

I am using Gatsby themes in my project and I have theme-ui, gatsby-plugin-theme-ui, and other plugins installed inside my theme and not inside the project itself.

I was able to solve this issue by installing gatsby-plugin-theme-ui inside my Gatsby site and removing it from my theme.

Not sure why I'm now having this error, maybe its related to the breaking changes in v0.13?

[hasparus]

Thanks for the issue @t2ca.

The error occurs when your theme depends on the gatsby-plugin-theme-ui, and your site depends on the theme, but it dissapears when your site depends on the plugin directly?

I don't have a way to check this right now, but I'm interested if changing from JSX to React.createElement in gatsby-ssr.js and gatsby-browser.js?

export const wrapRootElement = ({ element }) =>
  React.createElement(WrapRootElement, { element })

I'd guess that Gatsby transpiles plugins you depend on, but their dependencies are left untouched. We could switch to direct createElement/jsx calls in the plugin to fix this on Theme UI's side.

[t2ca]

I don't have a way to check this right now, but I'm interested if changing from JSX to React.createElement in gatsby-ssr.js and gatsby-browser.js?

export const wrapRootElement = ({ element }) =>
  React.createElement(WrapRootElement, { element })

hey @hasparus, thank you for the quick reply!

After making the change, I got a new error:

  ModuleParseError: Module parse failed: Unexpected token (23: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 (
  >     <ThemeProvider theme={fullTheme} components={components}>
  |       {children}
  |     </ThemeProvider>

[hasparus]

After making the change, I got a new error:

Awesome! That confirms my suspicion. We need to transpile all JSX in the plugin to make it work as a nested dependency.

I'm considering doing this manually, but it may be a bit error prone — we'd have to make sure nobody uses JSX there again — so it might be better to just do it with tsc && prettier.

[appsolut-jahn]

Same problem here. Installation on site level works fine, but when used inside our Gatsby theme, we receive the ModuleParseError: Module parse failed: Unexpected token (17:2) error message.
Working with theme-ui: 0.14.4 and Gatsby: 4.13.0

Did you made any progress on this issue?

[hasparus]

@appsolut-jahn, @t2ca, could you try updating to v0.14.5 and let me know if it fixes the problem on your side?

[nicfitzgerald]

"gatsby": "^4.24.4"
"gatsby-plugin-theme-ui": "^0.15.1"
"theme-ui": "^0.15.1"
I am also getting this error. I have tried it inside my Gatsby theme, as well as at the site level. I have also tried to downgrade both the plugin and main theme-ui package to v0.14.5. I have even attempted to appease the issue by installing @mdx-js/react and @emotion/react per the formal Gatsby plugin documentation. Could it be a change somewhere introduced in how Gatsby processes things?

[hasparus]

@nicfitzgerald Could you include the full error message?

[nicfitzgerald]

@hasparus -

yarn workspace v1.22.19
yarn run v1.22.19
yarn workspace v1.22.19
yarn run v1.22.19
$ gatsby develop
success compile gatsby files - 0.626s
success load gatsby config - 0.012s
success load plugins - 0.171s
success onPreInit - 0.004s
success initialize cache - 0.055s
success copy gatsby files - 0.086s
success Compiling Gatsby Functions - 0.165s
success onPreBootstrap - 0.181s
success createSchemaCustomization - 0.011s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.067s
success building schema - 0.212s
success createPages - 0.030s
success createPagesStatefully - 0.033s
info Total nodes: 41, SitePage nodes: 6 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success write out redirect data - 0.005s
success onPostBootstrap - 0.002s
info bootstrap finished - 3.122s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.131s
success write out requires - 0.004s
success run static queries - 0.018s - 2/2 109.02/s
success run page queries - 0.010s - 1/1 102.00/s

 ERROR

Module parse failed: Unexpected token (26: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 (
>     <ThemeProvider theme={fullTheme}>
|       <MDXProvider
|         components={useThemedStylesWithMdx(useMDXComponents(components))}



  ModuleParseError: Module parse failed: Unexpected token (26: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 (
  >     <ThemeProvider theme={fullTheme}>
  |       <MDXProvider
  |         components={useThemedStylesWithMdx(useMDXComponents(components))}

  - NormalModule.js:976 handleParseError
    [buildtheme]/[webpack]/lib/NormalModule.js:976:19

  - NormalModule.js:1095
    [buildtheme]/[webpack]/lib/NormalModule.js:1095:5

  - NormalModule.js:800 processResult
    [buildtheme]/[webpack]/lib/NormalModule.js:800:11

  - NormalModule.js:860
    [buildtheme]/[webpack]/lib/NormalModule.js:860:5

  - LoaderRunner.js:407
    [buildtheme]/[loader-runner]/lib/LoaderRunner.js:407:3

  - LoaderRunner.js:233 iterateNormalLoaders
    [buildtheme]/[loader-runner]/lib/LoaderRunner.js:233:10

  - LoaderRunner.js:224
    [buildtheme]/[loader-runner]/lib/LoaderRunner.js:224:4

  - NormalModule.js:834
    [buildtheme]/[webpack]/lib/NormalModule.js:834:15


  - CachedInputFileSystem.js:27 runCallbacks
    [buildtheme]/[enhanced-resolve]/lib/CachedInputFileSystem.js:27:15

  - CachedInputFileSystem.js:200
    [buildtheme]/[enhanced-resolve]/lib/CachedInputFileSystem.js:200:4

  - graceful-fs.js:123
    [buildtheme]/[graceful-fs]/graceful-fs.js:123:16

  - read_file_context:68 FSReqCallback.readFileAfterClose [as oncomplete]
    node:internal/fs/read_file_context:68:3


not finished Building development bundle - 1.233s

That is the entire error message when I follow the Gatsby Theming Tutorial. I have copy and pasted everything from the tutorial so as to avoid mistyping.

[luckedip]

Any resolution to this? Following the same tutorial - hitting the same error...

[hasparus]

@LekoArts sorry for pinging you here, but would you have some advice what should we do? Compiling away JSX in themes and plugins seems to clash with the possibility of shadowing to me.

[pengying]

I ran into the same error message when I had a theme name that didn't match the gatsby-theme prefix. Maybe that's your issue?