Bug(cms-gatsby-plugin): build fails when using TypeScript setup

[erezrokah]

Describe the bug Context: https://community.netlify.com/t/netlify-cms-is-throwing-a-callback-has-already-been-called-error/20515/4

Gatsby project fails when using the CMS plugin with a TypeScript setup

To Reproduce

To reproduce:

1. git clone https://github.com/NovySolutions/test-repo
2. cd test-repo
3. npm ci
4. mkdir src/static to add a missing directory
5. npm run build

See that the build fails with Error: Callback was already called

Expected behavior The build should not fail

Applicable Versions:

System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 84.0.4147.135
    Firefox: 77.0.1
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.24.37 => 2.24.37
    gatsby-image: ^2.4.13 => 2.4.14
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.4.22 => 2.4.22
    gatsby-plugin-netlify: ^2.3.12 => 2.3.12
    gatsby-plugin-netlify-cms: ^4.3.11 => 4.3.11
    gatsby-plugin-offline: ^3.2.22 => 3.2.22
    gatsby-plugin-react-helmet: ^3.3.6 => 3.3.10
    gatsby-plugin-sass: ^2.3.12 => 2.3.12
    gatsby-plugin-scss-typescript: ^4.0.13 => 4.0.13
    gatsby-plugin-sharp: ^2.6.25 => 2.6.25
    gatsby-remark-copy-linked-files: ^2.3.12 => 2.3.12
    gatsby-remark-images: ^3.3.25 => 3.3.25
    gatsby-remark-relative-images: ^0.3.0 => 0.3.0
    gatsby-source-filesystem: ^2.3.24 => 2.3.24
    gatsby-transformer-remark: ^2.8.28 => 2.8.28
    gatsby-transformer-sharp: ^2.5.7 => 2.5.12
  npmGlobalPackages:
    gatsby-cli: 2.12.44

CMS configuration

https://github.com/NovySolutions/test-repo/blob/1d8f4c1c953781903d4509c2a7a9f9eadfbaf676/src/cms/cms.ts#L7

Additional context

Removing registerPreviewTemplate: https://github.com/NovySolutions/test-repo/blob/1d8f4c1c953781903d4509c2a7a9f9eadfbaf676/src/cms/cms.ts#L5

or the style imports: https://github.com/NovySolutions/test-repo/blob/1d8f4c1c953781903d4509c2a7a9f9eadfbaf676/src/components/layout-components/layout.tsx#L3

Fixes the issue.

We should probably look at how gatsby-plugin-scss-typescript works and verify we're not doing anything weird here: https://github.com/gatsbyjs/gatsby/blob/90e66c7fcdc7a75185bdaa336b0f9bdec9762585/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L116

[peruukki]

I've run to this same issue but my setup doesn't have TypeScript. The problem also apparently happens in this repository that uses JavaScript: https://github.com/equk/equk-gatsby#postbuild. In my case, the error showed up once I tried to import font declaration CSS files, e.g. eb-garamond:

import '@fontsource/eb-garamond/400.css';

The error comes withgatsby build but not when running gatsby develop. I tried adding the import in my layout file or gatsby-browser.js, both had the same result.