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

Netlify CMS
,
#1

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’

image
image811×174 6.38 KB

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

This does not work:

Preview:

image
image702×339 11.8 KB

Layout Component:
image

This does work:
Preview is the same as the last

Layout Component:
image

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

image
image991×920 26.3 KB

image
image1015×971 32.4 KB

#2

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.

#3

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

#4

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.

#5

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

#6

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

1 Like
#7

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

#8

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):
https://www.netlifycms.org/docs/customization/#registerpreviewtemplate

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

#9

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 :slight_smile: