CssDependency Error during Gatsby site build

Hi there,

I’ve had this issue crop up a few times, last time I tried to troubleshoot it the issue went away without clear reason why but it’s back again. It’s related to the css file for styling my Netlify CMS preview. When the error doesn’t occur, things work as expected, the preview is styled with my css file.

When it occurs
The error occurs both when I try to run gatsby build locally, or when I clear the cache and deploy on Netlify. If I push a new build without clearing cache on Netlify, it goes through okay. Strangely, I have found that if I clone my repo back down to a new folder and run gatsby build from there, there is no issues. I’m not sure why my original local folder is different, or why the Netlify version is having issues too.

The error

"gatsby-plugin-netlify-cms" threw an error while running the onCreateWebpackConfig lifecycle:

No module factory available for dependency type: CssDependency



  Error: No module factory available for dependency type: CssDependency
  
  - Compilation.js:800 addDependency
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:800:12
  
  - Compilation.js:208 iterationOfArrayCallback
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:208:3
  
  - Compilation.js:816 addDependenciesBlock
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:816:5
  
  - Compilation.js:827 Compilation.processModuleDependencies
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:827:4
  
  - Compilation.js:954 afterBuild
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:954:15
  
  - Compilation.js:998 
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:998:11
  
  - Compilation.js:734 callback
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:734:5
  
  - Compilation.js:782 
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/Compilation.js:782:12
  
  - NormalModule.js:478 handleParseResult
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/NormalModule.js:478:12
  
  - NormalModule.js:500 
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/NormalModule.js:500:6
  
  - NormalModule.js:358 
    [projectname]/[gatsby-plugin-netlify-cms]/[webpack]/lib/NormalModule.js:358:12
  
  - LoaderRunner.js:373 
    [projectname]/[loader-runner]/lib/LoaderRunner.js:373:3
  
  - LoaderRunner.js:214 iterateNormalLoaders
    [projectname]/[loader-runner]/lib/LoaderRunner.js:214:10
  
  - LoaderRunner.js:186 
    [projectname]/[loader-runner]/lib/LoaderRunner.js:186:6
  
  - LoaderRunner.js:111 context.callback
    [projectname]/[loader-runner]/lib/LoaderRunner.js:111:13
  
  - loader.js:198 
    [projectname]/[mini-css-extract-plugin]/dist/loader.js:198:12

My config
I have a Gatsby build with Netlify hosting and Netlify CMS using gatsby-plugin-netlify-cms, configured like so in the gatsby-config:

    {
  resolve: 'gatsby-plugin-netlify-cms',
  options: {
    modulePath: `${__dirname}/src/cms/cms.js`,
    htmlTitle: 'My Title'
  },
},

cms.js referenced above is a very basic file just pointing to a css file for styling the CMS preview:

import CMS from 'netlify-cms-app'

import './cms.css'

Thanks for any help!

Hi @joshunwin can you share your repo?
Does running gatsby clean helps?

I did the following which seems to have solved it:

  1. Remove ‘node modules’ and reinstall.
  2. Update everything: Gatsby, React and Netlify CLI
  3. Deploy with ‘clear cache’ on Netlify.

great! thanks for sharing that.