Gatsby: Importing SCSS into cms module breaks only during live netlify deploy (gatsby-plugin-netlify-cms)

[apolopena]

When I import scss into my custom cms module for gatsby-plugin-netlify-cms everything works fine locally for gatsby serve (localhost:9000) and gatsby develop (localhost:8000), however when I deploy to the netlify host I get the following error in my build log:

4:31:08 PM: success onPostBootstrap - 0.286s
4:31:08 PM: ⠀
4:31:08 PM: info bootstrap finished - 7.609 s
4:31:08 PM: ⠀
4:31:15 PM: error UNHANDLED EXCEPTION Callback was already called.
4:31:15 PM: 
4:31:15 PM:   Error: Callback was already called.
4:31:15 PM:   
4:31:15 PM:   - async.js:16 throwError
4:31:15 PM:     [repo]/[neo-async]/async.js:16:11
4:31:15 PM:   
4:31:15 PM:   - async.js:2818 
4:31:15 PM:     [repo]/[neo-async]/async.js:2818:7
4:31:15 PM:   
4:31:15 PM:   - next_tick.js:61 process._tickCallback
4:31:15 PM:     internal/process/next_tick.js:61:11
4:31:15 PM:   
4:31:15 PM: 
4:31:15 PM: not finished run queries - 6.932s

The contents of the offending file ./src/cms/custom-netlify.js Please note that when the import scss statement is commented out the build error goes away. Also replacing the offending line of code with CMS.registerPreviewStyle('../../content/assets/style/main.scss')' works locally and doesnt break the build on netlify, however the styles dont show up in production. In all cases the script tag for the styles is in the rendered html:`

/* eslint-disable */
import CMS from 'netlify-cms-app'
import config from './config-netlify'
import "../../content/assets/style/main.scss" 

CMS.init(config)

The relavant portion of my gatsby-config.js

plugins: [
    {
      // this entry has to be the first or will not work as per FAQ 
      resolve:`gatsby-source-filesystem`, 
      options:{
        path:`${__dirname}/static/assets`,
        name:`assets`
      }
    },
    `gatsby-plugin-remove-fingerprints`,
     /* gatsby-plugin-frontmatter-markdown-loader must come before gatsby-plugin-netlify-cms 
        since we use it in a gatsby-plugin-netlify-cms module. See the comments in gatsby-node.js
        in the local /plugins folder for more information.
     */
    `gatsby-plugin-frontmatter-markdown-loader`,
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        manualInit: true,
        modulePath: `${__dirname}/src/cms/custom-netlify.js`
      }
    },
    `gatsby-plugin-styled-components`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-feed-mdx`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/data/pages`,
        name: `page data`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/data/cms_ui`,
        name: `cms ui data`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        defaultLayouts: {
          default: require.resolve("./src/templates/mdx/default.js")
        },
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: "gatsby-remark-external-links",
            options: {
              target: "_blank",
              rel: "nofollow noreferrer"
            }
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: `gatsby-remark-vscode`,
          },
          {
            resolve: `gatsby-remark-copy-linked-files`,
          },
          {
            resolve: `gatsby-remark-smartypants`,
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // edit below
        // trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
  ],

My relavant portion of my package.json

{
  "dependencies": {
    "@mdx-js/mdx": "^1.5.7",
    "@mdx-js/react": "^1.5.7",
    "babel-plugin-styled-components": "^1.10.7",
    "bulma": "^0.8.0",
    "frontmatter-markdown-loader": "^3.2.1",
    "gatsby": "^2.19.43",
    "gatsby-image": "^2.0.39",
    "gatsby-plugin-feed-mdx": "^1.0.0",
    "gatsby-plugin-google-analytics": "^2.0.18",
    "gatsby-plugin-manifest": "^2.2.47",
    "gatsby-plugin-mdx": "^1.0.82",
    "gatsby-plugin-netlify-cms": "^4.0.0",
    "gatsby-plugin-offline": "^3.0.40",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-remove-fingerprints": "^0.0.2",
    "gatsby-plugin-sass": "^2.1.30",
    "gatsby-plugin-sharp": "^2.4.12",
    "gatsby-plugin-styled-components": "^3.1.20",
    "gatsby-plugin-typography": "^2.2.13",
    "gatsby-remark-copy-linked-files": "^2.0.11",
    "gatsby-remark-external-links": "^0.0.4",
    "gatsby-remark-images": "^3.1.49",
    "gatsby-remark-responsive-iframe": "^2.1.1",
    "gatsby-remark-smartypants": "^2.0.9",
    "gatsby-remark-vscode": "^2.0.3",
    "gatsby-source-filesystem": "^2.1.55",
    "gatsby-transformer-sharp": "^2.3.18",
    "netlify-cms-app": "^2.11.29",
    "node-sass": "^4.13.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.0",
    "react-switch": "^5.0.0",
    "react-typography": "^0.16.19",
    "styled-components": "^5.0.1",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.75",
    "typography": "^0.16.19",
    "typography-theme-wordpress-2016": "^0.16.19"
  },
  "devDependencies": {
    "@babel/register": "^7.8.6",
    "better-docs": "^1.4.7",
    "jsdoc": "^3.6.3",
    "prettier": "^1.19.0"
  }
}

System info

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.1 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.13.2 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.16 - /c/Python27/python
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.19.43 => 2.19.43 
    gatsby-image: ^2.0.39 => 2.2.43 
    gatsby-plugin-feed-mdx: ^1.0.0 => 1.0.1 
    gatsby-plugin-google-analytics: ^2.0.18 => 2.1.37 
    gatsby-plugin-manifest: ^2.2.47 => 2.2.47 
    gatsby-plugin-mdx: ^1.0.82 => 1.0.82 
    gatsby-plugin-netlify-cms: ^4.0.0 => 4.1.41 
    gatsby-plugin-offline: ^3.0.40 => 3.0.40 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.1.23 
    gatsby-plugin-remove-fingerprints: ^0.0.2 => 0.0.2 
    gatsby-plugin-sass: ^2.1.30 => 2.1.30 
    gatsby-plugin-sharp: ^2.4.12 => 2.4.12 
    gatsby-plugin-styled-components: ^3.1.20 => 3.1.20 
    gatsby-plugin-typography: ^2.2.13 => 2.3.24 
    gatsby-remark-copy-linked-files: ^2.0.11 => 2.1.39 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.1.49 => 3.1.49 
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.2.33 
    gatsby-remark-smartypants: ^2.0.9 => 2.1.22 
    gatsby-remark-vscode: ^2.0.3 => 2.0.3 
    gatsby-source-filesystem: ^2.1.55 => 2.1.55 
    gatsby-transformer-sharp: ^2.3.18 => 2.3.18 

I think I need to tell webpack how to bundle the scss but I am unsure how. main.scss fails to load in all cases but somehow locally the styles from main.scss make it the preview pane.

[donaldboulton]

Why does Gatsby encourage building into a Gatsby build a precompiled app like Netlify CMS or Identity?
A Lot of plugins Gatsby try's to use are not needed and can be done in a cleaner better way.
DNN did that MVC does that Wordpress and others and its quite stupid to recompile a precompiled app into another application.
Ease of use for beginners ??????
Here is how it should be done with Nelly CMS and Identity, below link and post.
My Post and Code on Netlify CMS
My Repo /static/admin/

[apolopena]

@donaldboulton Gatsby's architechure, namley its plugin system allows great extensiblity for all levels of programmers and does lend itself well to beginners due to ease of use which of course comes about from encapsulation of underlying logic. I agree with you though all of this can be quite a double edged sword indeed! Thanks revealing your process. I like to learn from everything.

[erezrokah]

to recompile a precompiled app into another application.

The CMS plugin doesn't re-compile Netlify CMS, as it is marked as an external dependency:
https://github.com/gatsbyjs/gatsby/blob/2d6f7017dd359d1d514641e23bf5ca3521ceb33c/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L168

As for the issue, @apolopena do you mind upgrading your dependencies to latest versions possible and trying after gatsby clean? Also, please make sure your Netlify build is running node 12.

[apolopena]

@erezrokah Thanks, The Netlify build was using node 10.19.0 so I updated the Netlify build node version to match my local node version 12.4.0 and despite the fix, the build broke in the same way.
As far as I know all my dependencies are up to date but perhaps some old ones are somehow still cached on the Netlify build?

My local Yarn version is 1.19.1 and the Netlify build is using version 1.17.0 but I dont think that should matter.

[Daniel-Kao]

same herer, version ^2.19.43, gatsby breaks during bundling css, hope for a quick fix!

[apolopena]

I finally solved the issue by using the netlify Raw CSS in registerPreviewStyle beta feature.
TLDR; in your cms module include the css/sass/scss like this:

/**
 * Assumes a webpack project with `sass-loader` and `css-loader` installed.
 * Takes advantage of the `toString` method in the return value of `css-loader`.
 */
import CMS from 'netlify-cms';
import styles from '!css-loader!sass-loader!../main.scss';
CMS.registerPreviewStyle(styles.toString(), { raw: true });

Turns out this was never a bug, rather it was a case of a disconnect between the gatsby documentation and the netlify documentation.
The webpack css and sass loaders just needed to be delt with in the cms module so webpack could process the styles into a string that can be passed to `CMS.registerPreviewStyle()'

Now all my builds (local and live) _and_ the css in the cms preview pane behave the same way. I did have to do a one-time unregistering the ServiceWorker in the browser when verifying the fix live as it was caching old css.

[erezrokah]

Thanks for sharing the solution @apolopena, though the CMS plugin runs a Wepback build of the cms.js file with your current Gatsby configuration so it should include all styles as long as they are referenced from cms.js or its imports.

[apolopena]

@erezrokah Yeah I guess in my case and possibly other cases, the Netlify live deployment process in the docker container does something different and or redundant with the webpack loaders when bundling so those loaders had to be disabled in the _custom_ cms.js using the webpack inline ! prefix syntax.

[laurieontech]

@donaldboulton Your comment includes personal attacks which are against our Code of Conduct.
We reserve the right to remove your access to the repo if continue to engage in such behavior.
We aim to be an inclusive and friendly open source project.
Please consider this as an initial warning and act accordingly.
I have deleted the comment.

[donaldboulton]

Now wait a second here I know who Apolo Pena is one of the healthiest best Yoga master I've seen hard as a rock and so is his Wife iard and excellent shape. Like me I am 63 years old and you cannot find a soft spot on my body. SO if there was anyone I would like to hang out with It would be them, I was just commenting on his GitHub Picture on April 1st. Mellow out Children.