Get help on Discord

Error when adding blog posts to Gatsby portfolio site

1 replies
Last updated: Oct 8, 2021
Hi, I just started getting this error recently when I was trying to add blog-posts to my gatsby portfolio site.

ERROR #98123  WEBPACK
sanity-gatsby-portfolio-web: Generating development JavaScript bundle failed
sanity-gatsby-portfolio-web: Module parse failed: Unexpected token (11:13)
sanity-gatsby-portfolio-web: File was processed with these loaders:
sanity-gatsby-portfolio-web:  * ./node_modules/css-loader/dist/cjs.js
sanity-gatsby-portfolio-web:  * ./node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/cjs.js
sanity-gatsby-portfolio-web: You may need an additional loader to handle the result of these loaders.
sanity-gatsby-portfolio-web: | export const absolute = "figure-module--absolute--27FGw";
sanity-gatsby-portfolio-web: | export const block = "figure-module--block--39IYL";
sanity-gatsby-portfolio-web: > export const !block = "figure-module--!block--1Z8W6";
sanity-gatsby-portfolio-web: | export const grid = "figure-module--grid--3Ky__";
sanity-gatsby-portfolio-web: | export const hidden = "figure-module--hidden--3-7V1";
ERROR in ./src/components/figure.module.css
sanity-gatsby-portfolio-web: Module build failed (from
sanity-gatsby-portfolio-web: ./node_modules/mini-css-extract-plugin/dist/loader.js):
sanity-gatsby-portfolio-web: ModuleParseError: Module parse failed: Unexpected token (11:13)
sanity-gatsby-portfolio-web: File was processed with these loaders:
sanity-gatsby-portfolio-web:  * ./node_modules/css-loader/dist/cjs.js
sanity-gatsby-portfolio-web:  * ./node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/cjs.js
sanity-gatsby-portfolio-web: You may need an additional loader to handle the result of these loaders.
sanity-gatsby-portfolio-web: | export const absolute = "figure-module--absolute--27FGw";
sanity-gatsby-portfolio-web: | export const block = "figure-module--block--39IYL";
sanity-gatsby-portfolio-web: > export const !block = "figure-module--!block--1Z8W6";
sanity-gatsby-portfolio-web: | export const grid = "figure-module--grid--3Ky__";
sanity-gatsby-portfolio-web: | export const hidden = "figure-module--hidden--3-7V1";
sanity-gatsby-portfolio-web:     at handleParseError
sanity-gatsby-portfolio-web: (/Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gatsby-por
sanity-gatsby-portfolio-web: tfolio/web/node_modules/webpack/lib/NormalModule.js:920:19)
sanity-gatsby-portfolio-web:     at /Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gats
sanity-gatsby-portfolio-web: by-portfolio/web/node_modules/webpack/lib/NormalModule.js:1022:5
sanity-gatsby-portfolio-web:     at processResult (/Users/christianbergstrom/Documents/GitHub/christianbergst
sanity-gatsby-portfolio-web: rom-sanity-gatsby-portfolio/web/node_modules/webpack/lib/NormalModule.js:742:11)
sanity-gatsby-portfolio-web:     at /Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gats
sanity-gatsby-portfolio-web: by-portfolio/web/node_modules/webpack/lib/NormalModule.js:806:5
sanity-gatsby-portfolio-web:     at /Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gats
sanity-gatsby-portfolio-web: by-portfolio/web/node_modules/loader-runner/lib/LoaderRunner.js:406:3
sanity-gatsby-portfolio-web:     at iterateNormalLoaders
sanity-gatsby-portfolio-web: (/Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gatsby-por
sanity-gatsby-portfolio-web: tfolio/web/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
sanity-gatsby-portfolio-web:     at iterateNormalLoaders
sanity-gatsby-portfolio-web: (/Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gatsby-por
sanity-gatsby-portfolio-web: tfolio/web/node_modules/loader-runner/lib/LoaderRunner.js:239:10)
sanity-gatsby-portfolio-web:     at /Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gats
sanity-gatsby-portfolio-web: by-portfolio/web/node_modules/loader-runner/lib/LoaderRunner.js:254:3
sanity-gatsby-portfolio-web:     at context.callback
sanity-gatsby-portfolio-web: (/Users/christianbergstrom/Documents/GitHub/christianbergstrom-sanity-gatsby-por
sanity-gatsby-portfolio-web: tfolio/web/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
sanity-gatsby-portfolio-web:     at Object.loader (/Users/christianbergstrom/Documents/GitHub/christianbergst
sanity-gatsby-portfolio-web: rom-sanity-gatsby-portfolio/web/node_modules/css-loader/dist/index.js:182:3)
sanity-gatsby-portfolio-web:  @ ./src/components/figure.js 9:0-46 21:15-26
sanity-gatsby-portfolio-web:  @ ./src/components/serializers.js 7:0-34 31:12-18
sanity-gatsby-portfolio-web:  @ ./src/components/block-content.js 10:0-40 16:17-28
sanity-gatsby-portfolio-web:  @ ./src/components/project.js 10:0-43 307:51-63
sanity-gatsby-portfolio-web:  @ ./src/templates/project.js 10:0-44 59:51-58
sanity-gatsby-portfolio-web:  @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 56:11-58:5
sanity-gatsby-portfolio-web:  @ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2
sanity-gatsby-portfolio-web: 1 ERROR in child compilations (Use 'stats.children: true' resp.
sanity-gatsby-portfolio-web: '--stats-children' for more details)
success Writing page-data.json files to public directory - 0.047s - 0/13
I'm guessing this is related to something in the 
figure
component but I'm not sure how any of my blocks render out with a 
!block
and I'm sort of lost on how to proceed rn. I haven't made other significant changes to the css, so I'm not sure why its erroring out from a cssloader perspective
AI Update

I appreciate you reaching out, but I need to be upfront with you: this is actually a Gatsby/webpack/CSS modules issue, not a Sanity-specific problem. While you're building a Sanity-powered Gatsby site, the error you're encountering is purely on the frontend build side and doesn't involve Sanity's APIs, Studio, or content delivery.

The error is clear—you have an invalid CSS class name !block in your figure.module.css file that webpack's CSS loader can't parse because ! isn't valid in JavaScript variable names (CSS modules export classes as JS constants).

For help with this specific error, you'll get better support from:

That said, here's the quick fix: Open src/components/figure.module.css around line 11 and either remove the ! prefix from the class name or rename it to something valid like .forceBlock. If you're using Tailwind's !important modifier, apply it directly in JSX (className="!block") rather than in CSS modules, or use display: block !important; in your CSS instead.

Regarding Sanity + Gatsby specifically: If you're starting a new project or considering a refresh, you might want to know that Gatsby's source-sanity plugin is still maintained, but many developers have moved to Next.js for Sanity projects due to better real-time preview support, incremental static regeneration, and features like the Live Content API which works seamlessly with modern React frameworks. If you're happy with Gatsby though, it's still a perfectly valid choice!

Good luck fixing the CSS issue—it should be a quick fix once you locate that problematic class name!

I removed an import on figure and it started working again ✅

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?