[gatsby-plugin-netlify-cms]: Breaks Gatsby develop and build

[peduarte]

Hello 👋

I've noticed that by adding the latest gatsby-plugin-netlify-cms plugin, gatby develop and gatsby build stop working.

I've done a few tests and isolated the issue down to this plugin. If I remove it, everything works again.

Below are the errors I'm getting:

---

gatsby develop

gatsby build

---

package.json

---

I've tried downgrading the version of all packages, but not luck. The only way to get my build to work again is by removing gatsby-plugin-netlify-cms.

Appreciate any guidance, thanks! 👍

[pogo19]

Hi, this is known error in recently released netlify-cms 1.2.0, see this issue:
decaporg/decap-cms#1097

[peduarte]

Oh thats great, thanks for sharing that link.

Let's keep this opened until we release gatsby-plugin-netlify-cms with the updated dependency.

[tech4him1]

(I will warn that this is somewhat speculation, I haven't dug too deeply.)

Tracing the error back to Acorn and WebPack, it looks like WebPack version 1, which Gatsby is using, has the Acorn parser set to parse ES6 and lower (webpack/lib/Parser.js#v1.15.0). This is why the Gatsby WebPack loader cannot parse the Netlify CMS unless we transpile anything newer than ES6.

(The latest version of WebPack supports parsing up to ES2017 and lower (webpack/lib/Parser.js#master), but Gatsby isn't using it.)

cc/ @erquhart @talves

[talves]

@tech4him1 Your hypothesis seems right on point with what I was finding in my tests.

[pogo19]

@tech4him1 @talves I've read somewhere that Webpack version upgrade is planned for Gatsby v2 by @KyleAMathews ... still a solution for Gatsby v1 is needed I think.

[tech4him1]

@pogo19 Yes, @erquhart linked to v2 in #2641. I do agree that a solution is needed to the current (v1) Gatsby. I'm hoping there is an alternative way than making the CMS transpile it, though.

@erquhart @KyleAMathews Is there a reason why the gatsby-plugin-netlify-cms bundles the CMS.js into the Gatsby site bundle, instead of just putting it in static? Does it have to do this to support CMS template integration, etc.?

[peduarte]

It's mentioned on decaporg/decap-cms#1097 that the temp fix is to revert to netlify-cms@1.1.0.

However, as gatsby-plugin-netlify-cms declares netlify-cms dependency with ^1.0.1 so it's installing 1.2.0.

Is there a temp workaround?

[pogo19]

@peduarte If you are using yarn, you can use this in your package.json:

"resolutions": {
  "gatsby-plugin-netlify-cms/netlify-cms": "1.1.0"
}

...and then delete your yarn.lock and node_modules to be sure

[peduarte]

@pogo19 awesome, thank you! 🙏

[Jaikant]

@pogo19 Using the work around the gatsby develop and gatsby build works fine. Thanks!

Unfortunately the cms is still broken. Uploading media files or submit fails. An image file upload fails with the below error ...

cms.js:174 Uncaught (in promise) TypeError: Cannot read property 'find' of undefined
    at http://localhost:8000/cms.js:2883:75088
    at r (http://localhost:8000/cms.js:2899:122589)
    at Generator._invoke (http://localhost:8000/cms.js:2899:122377)
    at Generator.e.(anonymous function) [as next] (http://localhost:8000/cms.js:2899:122768)
    at o (http://localhost:8000/cms.js:2727:11606)
    at http://localhost:8000/cms.js:2727:11754
    at new Promise (<anonymous>)
    at new t (http://localhost:8000/cms.js:2727:1085)
    at http://localhost:8000/cms.js:2727:11548
    at http://localhost:8000/cms.js:2883:76032

[pogo19]

@Jaikant If you think it is an error in Netlify CMS, please report the issue in Netlify CMS Github.

[csi-lk]

Is it worth pushing a new release of gatsby-plugin-netlify-cms with netlify-cms@1.1.0 to work around for the moment or are we going to wait for the upstream fix?

[erquhart]

That won't be necessary, I'm working on a fix for this right now. Stay tuned.

[erquhart]

Fixed in netlify-cms 1.2.2.

[erquhart]

@peduarte can you try it now and close this if things are working?

[peduarte]

@erquhart sure, will do!

[talves]

@peduarte you may have to yarn upgrade gatsby-plugin-netlify-cms , it updates the sub dependencies.

[peduarte]

Beautiful, great work everyone 🎉

[TomPichaud]

I just started a new project using 'gatsby-plugin-netlify-cms', and I'm still not able to build my CSS Module if the plugin is active, 'gatsby develop' works fine 'gatsby build' output an error :

Error: /Users/Tom/Developer/GitHub/wise-starter/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"r emove":true}!/Users/Tom/Developer/GitHub/wise-starter/node_modules/style-loader/index.js!/Users/Tom/Developer/GitHub/wise-starter/node_modules/css-loader/index.js?modules&minimize&importLoa ders=1&localIdentName=[path]---[name]---[local]---[hash:base64: 5]!/Users/Tom/Developer/GitHub/wise-starter/node_modules/sass-loader/index.js?{"plugins":[]}!/Users/Tom/Developer/GitHub/wise- starter/src/components/header.module.sass doesn't export conten t

The only way to get my build to work is by removing gatsby-plugin-netlify-cms.

[pogo19]

Hey Tom! Do you have the newest versions? What are the used versions of plugin and of its dependency to netlify-cms?

[TomPichaud]

It was a fresh install of Gatsby, using Gatsby new command and fresh install of all plugins...

"gatsby-plugin-netlify-cms": "^1.0.11"

"dependencies": {
    "html-webpack-include-assets-plugin": "^1.0.2",
    "html-webpack-plugin": "^2.30.1",
    "netlify-cms": "^1.0.1",
    "netlify-identity-widget": "^1.4.11"
  }

I tried your solution, but still not working even with Netlify-cms 1.3

"resolutions": { "gatsby-plugin-netlify-cms/netlify-cms": "1.1.0" }

[erquhart]

@TomPichaud are you using css modules?

[TomPichaud]

Simple test using CSS Modules, https://github.com/TomPichaud/test-cms-plugin

But Gatsby develop works just fine !

[erquhart]

Alright I think I know what's going on, I'll take a swing at it in the morning.

[TomPichaud]

Thanks for having a look, I hope this will be resolved soon. Should we reopen the issue or create a new one ?

[erquhart]

@TomPichaud creating a new one would be great.