gatsby-plugin-sass build error: Module build failed - Didn't get a result from child compiler

[dcs3spp]

Hi,

I am newbie to Gatsby and I am getting this error when I import my sass
in my theme layout after configuring gatsby-plugin-sass. The error does not give any further details other than a stack trace.

Generating development JavaScript bundle failed

Module build failed (from
../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
../node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Didn't get a result from child compiler

 ERROR #98123  WEBPACK.DEVELOP

Generating development JavaScript bundle failed

Module build failed (from
../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
../node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Didn't get a result from child compiler
    at /Users/me/Development/stuff/gatsby/gat
sby-project/node_modules/mini-css-extract-plugin/dist/lo
ader.js:311:23
    at finalCallback
(/Users/me/Development/stuff/gatsby/gatsby-pr
oject/node_modules/webpack/lib/Compiler.js:627:5)
   
   <....large stack trace excluded for brevity ....>
   
    at eval (eval at create (/Users/me/Development/stuff/gatsby/gatsby-project/node_modules/tapable/l
ib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at processTicksAndRejections
(node:internal/process/task_queues:105:5)
 @ ../theme/index.js 8:0-34
 @ ./gatsby-browser.js 5:0-41 11:42-53
 @ ./.cache/api-runner-browser-plugins.js 16:10-41
 @ ./.cache/api-runner-browser.js 3:16-55
 @ ./.cache/app.js 10:0-65 28:87-32:1 36:20-29 64:0-14
87:19-28 122:6-15 28:0-32:2

I have gatsby-plugin-sass and sass installed in my theme as a peer dependency. As soon as I import my scss file in the ThemeLayout (based in index.js) it fails with the error detailed above. If I remove the import statement for styles.scss it works.

index.js

import React, { useState } from "react";
import Navigation from "./src/components/Navigation";
import Sidebar from "./src/components/Sidebar";
import "./src/styles/styles.scss";

const ThemeLayout = ({ children, tocContent }) => {
  const [selectedSidebar, setSelectedSidebar] = useState(null);

  const handleNavClick = (sidebarPath) => {
    setSelectedSidebar(sidebarPath);
  };

  return (
    <div className="container">
      {/* Header: Logo, Search Bar, Navigation */}
      <header className="header">
        <section className="branding">
          <h1>Your Logo</h1>{" "}
        </section>

        <section className="search">
          <p>Search</p>
        </section>

        <nav className="navigation">
          <Navigation onNavClick={handleNavClick} />
        </nav>
      </header>

      {/* Main content area */}
      <main className="main-content">
        <aside className="sidebar">
          {/* Standard sidebar */}
          <Sidebar relativePath={selectedSidebar} />
        </aside>

        {/* Content area with the article and the TOC */}
        <section className="content-section">
          <article className="content-article">{children}</article>

          <aside className="content-sidebar">
            {/* <TocSidebar tocContent={tocContent} /> */}
          </aside>
        </section>
      </main>

      {/* Footer */}
      <footer className="footer">
        <p>© {new Date().getFullYear()} </p>
      </footer>
    </div>
  );
};

export default ThemeLayout;

I have sass setup in my gatsby-config.js to have an include path in both my theme AND my site as shown below:

module.exports = {
  plugins: [
    {
      resolve: gatsby-source-filesystem,
      options: {
        name: data,
        path: ${__dirname}/src/data,
      },
    },
    {
      resolve: gatsby-plugin-sass,
      options: {
        sassOptions: {
          includePaths: [${__dirname}/src/styles],
        },
      },
    },
    gatsby-transformer-yaml,
  ],
};

My site has "gatsby-plugin-sass": "^6.13.1" and "sass": "^1.79.4" in the package.json. My theme has these as peer dependencies.

The ./src/styles/styles.scss file is empty in both my theme and site. I have also tried adding a basic entry in the scss files as shown below and the error still occurs:

body {
  background-color: #f4f4f4;
}

I do not understand why the error occurs after following the Gatsby documentation for the plugin.

I have tried enabling children stats in webpack.config as suggested by the error output by updating my gatsby-node.js file as shown below. I have done this in both my theme and site projects. No further details are provided in the stack trace to assist me with understanding why the error occurs. Couldn't locate the webpack.config to debug further.

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    stats: {
      children: true, // Enable detailed stats for child compilations
    },
  });
};

I have tried:

• Clearing the cache
• Cleaning and reinstalling node_modules

The error still occurs.

Could it be that the Gatsby webconfig results in 2 loaders for sass at src/styles/styles.scss for my theme AND site project, like in this issue??