Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

hasparuscommented, Feb 10, 2022

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.

0reactions

nicfitzgeraldcommented, Oct 17, 2022

@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.

Top Results From Across the Web

Module parse failed: Unexpected Token. You may need an ...

The error comes from this line: return <h1>React App</h1> , because <h1>...</h1> is not valid javascript. Even if rename this is would be ......

Module parse failed: Unexpected token. You may ... - GitHub

This is a library build issue. We moved to ts3.8 without thinking about optional chaining transpiling. Here seems like a correct way to...

Odyssey Lift-off I: "Module parse failed: Unexpected token" Error

Hello,. I am on the “useQuery hook” step attempting to implement the grid. Here is my code that I think is problematic:

Module parse failed: Unexpected token (1:0) - Laracasts

Hello , After running npm run watch I see this error : ERROR in ./resources/js/components/irp/admin/EditGroup.vue 1:0 Module parse failed: Unexpected token ...

[Help] Module parse failed: Unexpected token . Babel not ...

npm install and make get many similar errors like the following. ERROR in ./node_modules/react-native/Libraries/Animated/src/Easing.js 64:16 ...