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

[TomPichaud]

From : #4031

Gatsby build, output an error when using [gatsby-plugin-netlify-cms] with CSS Modules

Simple test using starter with CSS Modules and [gatsby-plugin-netlify-cms], https://github.com/TomPichaud/test-cms-plugin

Gatsby develop works just fine.

@erquhart @pogo19

[erquhart]

Started digging into this, it seems the sass plugin doesn't use it's own instance of extract-text-webpack-plugin, similar to Gatsby's main webpack config prior to #3652, and it doesn't attempt to merge the plugin in either, so it's relying on that happening in Gatsby core.

Fixing this in the sass plugin stops the error, but causes #3753 to resurface. Need to investigate further.

[erquhart]

Fix in #4379.

Started printing public/styles.css content on change during a Gatsby build (globally installed onchange is handy for this), the file is rewritten multiple times, which can cause it to temporarily have an unexpected value when Gatsby grabs it's contents to inject into the document head.

Given that v2 is on the horizon, this may not be worth digging to far into. If each plugin is handling style writes correctly, styles.css should always be rewritten to the same value.

[interglobalmedia]

Hi, I have the same problem as @TomPichaud. In gatsby develop, I have absolutely no issues with gatsby-plugin-netlify-cms and netlify-cms-app (followed the Gatsby docs!), but it breaks on build.

npm run build                                                                                  ✖ ✹ ✭

> [email protected] build /Users/mariacam/Development/interglobalmedia
> gatsby build

success open and validate gatsby-configs - 0.018 s
success load plugins - 1.132 s
success onPreInit - 0.006 s
success delete html and css files from previous builds - 0.006 s
success initialize cache - 0.012 s
success copy gatsby files - 0.882 s
success onPreBootstrap - 0.015 s
success source and transform nodes - 0.558 s
success building schema - 0.328 s
success createPages - 0.168 s
success createPagesStatefully - 0.128 s
success onPreExtractQueries - 0.048 s
success update schema - 0.044 s
success extract queries from components - 0.408 s
success write out requires - 0.012 s
success write out redirect data - 0.024 s
success Build manifest and related icons - 0.137 s
success onPostBootstrap - 0.149 s
⠀
info bootstrap finished - 6.795 s
⠀
success run static queries - 1.117 s — 17/17 15.30 queries/second

 ERROR 

UNHANDLED REJECTION original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.



  Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping
   entirely and only map the generated position. If so, pass null for the original mapping instead of an obje
  ct with empty or null values.
  
  - source-map-generator.js:276 SourceMapGenerator_validateMapping [as _validateMapping]
    [interglobalmedia]/[webpack-sources]/[source-map]/lib/source-map-generator.js:276:15
  
  - source-map-generator.js:110 SourceMapGenerator_addMapping [as addMapping]
    [interglobalmedia]/[webpack-sources]/[source-map]/lib/source-map-generator.js:110:12
  
  - source-map-generator.js:72 
    [interglobalmedia]/[webpack-sources]/[source-map]/lib/source-map-generator.js:72:17
  
  - Array.forEach
  
  - source-map-consumer.js:157 BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping]
    [interglobalmedia]/[webpack-sources]/[source-map]/lib/source-map-consumer.js:157:14
  
  - source-map-generator.js:48 Function.SourceMapGenerator_fromSourceMap [as fromSourceMap]
    [interglobalmedia]/[webpack-sources]/[source-map]/lib/source-map-generator.js:48:24
  
  - SourceMapSource.js:32 SourceMapSource.node
    [interglobalmedia]/[webpack-sources]/lib/SourceMapSource.js:32:35
  
  - SourceAndMapMixin.js:30 SourceMapSource.proto.sourceAndMap
    [interglobalmedia]/[webpack-sources]/lib/SourceAndMapMixin.js:30:18
  
  - SourceMapDevToolPlugin.js:37 getTaskForFile
    [interglobalmedia]/[webpack]/lib/SourceMapDevToolPlugin.js:37:30
  
  - SourceMapDevToolPlugin.js:136 files.forEach
    [interglobalmedia]/[webpack]/lib/SourceMapDevToolPlugin.js:136:20
  
  - Array.forEach
  
  - SourceMapDevToolPlugin.js:130 compilation.hooks.afterOptimizeChunkAssets.tap
    [interglobalmedia]/[webpack]/lib/SourceMapDevToolPlugin.js:130:12
  
  
  - Hook.js:154 SyncHook.lazyCompileHook
    [interglobalmedia]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1313 hooks.optimizeChunkAssets.callAsync.err
    [interglobalmedia]/[webpack]/lib/Compilation.js:1313:42
  
⠋ Building production JavaScript and CSS bundles
[========                    ]   6.791 s 22/77 29% Generating image thumbnails
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mariacam/.npm/_logs/2019-07-08T20_17_31_037Z-debug.log

There are all sorts of issues with sourcemaps (and hmr). I have had to use 2 different workarounds. The one I have now is my second one. Previously, I had to make sure that sourcemaps was working in development. Then that broke, and then I had to turn it off in production. And now that no long er works when I add netlify-cms-app and gatsby-plugin-netlify-cms to the mix. Will also try and remove gatsby-plugin-netlify-cms and see if the build runs, and if I can also login then. Will report back.

[interglobalmedia]

Yup. When I comment out gatsby-plugin-netlify-cms in gatsby-config.js, my build runs beautifully.

[erquhart]

@interglobalmedia we fixed Tom's issue, can you open a separate one for this? Need steps to reproduce, etc.

[interglobalmedia]

@erquhart I fixed my own issue. Sorry that I did not follow up here! I think I told you about resolving? Too long to explain here, but essentially it had to do with the new terser peerDep in Gatsby and that meant that I had to stay with gatsby v 2.10.0 in the project and use npm-force-resolutions to fix the issue. Here is the repo if you want to take a look at what I use: interglobalmedianetwork.com This is bigger gatsby issue that many of us in various ways due to using different plugins have been experiencing. In my case, the straw that broke the camel's back was the gatsby-plugin-netlify-cms. I have podcasted/written two posts about it if that would help follow along. Can find them here: https://www.interglobalmedianetwork.com/blog/gatsby-terser-sourcemaps/ and https://www.interglobalmedianetwork.com/blog/gatsby-terser-sourcemaps/. Hope this helps! Do you still want me to open separate issue even though it has been resolved?

[erquhart]

Ah, didn't realize this was posted before we last talked - no need to open another issue! Glad you got it sorted 👍

[interglobalmedia]

Me too! Thanks for everything @erquhart!