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!