Netlify CMS is throwing a "Callback has already been called" error

Munson1970 · August 10, 2020, 6:22pm

My site is: nervous-archimedes-29186f

Hello, i am trying to create a preview template for Netlify CMS and im having trouble importing React components as the template. Any component that i import that has css styling on it throws this error when i run ‘gatsby build’

It works fine if i remove the styles from that component. Ex:

This does not work:

Preview:

Layout Component:

This does work:
Preview is the same as the last

Layout Component:

I have search google for the answer for about 6 hours today and i couldnt really find anything. This is my netlify cms config file and gatsbt-config.js

erez · August 18, 2020, 6:56am

Hi @Munson1970,
Can you please try running gatsby clean before gatsby build to see if that helps?
I’ve seen cases a stale cache can cause this error.

Munson1970 · August 18, 2020, 3:59pm

I went ahead and tried that and i still got the same error “Callback was already called”

It seems this error is only being thrown if i have a preview template that imports an CSS and that template is registered via the CMS.registerPreviewTemplate command. I dont get the error if i import a component that does not have css and i also dont get it if i dont actually register the component

erez · August 18, 2020, 5:17pm

Hi @Munson1970, sorry to hear that.
Can you set up a repo reproducing the issue? That would make it easier for to dig into the issue.

Munson1970 · August 19, 2020, 2:00am

Ok i made the test repo that gets the same error when i try to build it, it is located here: https://github.com/NovySolutions/test-repo

erez · August 20, 2020, 3:31pm

Thanks @Munson1970, I opened an issue to track this under the CMS repo:

github.com/netlify/netlify-cms

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

opened 03:27PM - 20 Aug 20 UTC

erezrokah

ssg: gatsby type: bug

**Describe the bug** Context: https://community.netlify.com/t/netlify-cms-is-t…hrowing-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](https://github.com/NovySolutions/test-repo/blob/1d8f4c1c953781903d4509c2a7a9f9eadfbaf676/gatsby-config.js#L9) 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

Munson1970 · August 30, 2020, 3:22am

Hello, i appreciate you creating the issue in github and everything.

I was wondering if you had any suggestions on how else to do this or some workaround if we are not able to get this fixed soon? Reason im asking is because this website is for a client and we are wanting to wrap this up in the next month or 2, so i was just wondering, is there another way other than inline styles that i could go about this that i am not thinking of?

Apologies if this is a dumb question haha

erez · August 30, 2020, 1:43pm

Hi @Munson1970,
The only suggestion I have is to drop TypeScript. This is actually the first time I’ve seen someone with that setup with the CMS plugin and quite sure a non TypeScript setup works with importing CSS the same way you’re importing.

I’ve tried disabling specific plugins/configurations in your setup but didn’t make any significant progress.

I was hoping that by opening an issue it would get some visibility and someone with the same setup would respond. That approach hasn’t been helpful until now…

Inlining styles could be a good solution.

We recently exposed the document and window instances of the frame to preview templates (as props):

You might be able to do some clever stuff with those.

Munson1970 · September 1, 2020, 1:57am

At this point it would be more work to ditch typescript than it would be to just go ahead and do inline styles or something like it, thank you for this advice, hopefully it gets resolved soon