Error: div[style]:1:3: property missing ':' error while yarn build

[rahulsuresh-git]

While performing a yarn build, I get this error. Not descriptive enough, can anyone assist?
The site loads perfectly when I run it locally.

Thanks.

[styxlab]

I can't reproduce this issue.

Please check, if you still run into this problem after the recent project updates. If the problem persists, I will need a reproduced example and a link to it. Please start from a clean clone and make sure you don't mix npm and yarn.

[rahulsuresh-git]

Yes, I understand it is hard to look at it without any reproduce :|
But, looks like this happens only when I try to fetch content from my GHOST instance. Doesn't happen while fetching from the default ghost data.
Not sure, if anything in the content can cause it to break like this.

Have tried cleaning cache and using yarn in a clean state, but still seems to happen.

[styxlab]

Thanks for the additional info. Could you please create temporary API keys in your Ghost Admin and publish them here, so I can source your content and get a chance to analyze it further?

[styxlab]

I cannot reach your Ghost CMS under https://www.crio.do/blog. Please paste exactly the URL that is shown in Ghost Admin under Integrations.

[styxlab]

Sorry, there was a typo on my end. Am now able to reproduce the issue!

[rahulsuresh-git]

Phew! :) Let me know if you need anything else from my side.

[rahulsuresh-git]

Just an heads up, I tried your gatsby monorepo as well, but it seems to work perfectly!
No such errors.

[styxlab]

There were two issues that I solved with the latest merge:

1. Your Ghost installation seems to be on an older version where the Content API does not throw an error, if a page is not found. I had to adapt the code to cater for this different behaviour of older APIs.

2. The div[style] error occurred on elements with custom styling and has been fixed too.

I hope your site is now compiling fine (it is on my local machine).

By the way, your blog site is really nice, how do you create these awesome feature images? Continue that topic on twitter?

[rahulsuresh-git]

Thank you @styxlab!
It works now. The only thing where I would require help is, when I try running next export, it says "Error: Image Optimization using Next.js' default loader is not compatible with next export"
Is there a way to disable these image optimisations?

Also, thanks for the appreciation. I will continue the conversation on twitter :)

[styxlab]

Yes, you can turn image optimizations off in appConfig.js:

// Images
export const nextFeatureImages: boolean = true
export const nextInlineImages: boolean = true

Default is true but you can set it to false.

[rahulsuresh-git]

Flipped them to false, still fails with the same error :(

[styxlab]

There seems to be an issue that image optimization cannot be fully turned off in Next.js which currently inhibits next export. See https://github.com/vercel/next.js/discussions/19372 for further details. Once there is a concise way to switch off the image optimization, I will incorporate it here. May I ask you why you need next export?

[rahulsuresh-git]

Oh okay. So I want to host the website in an S3 bucket, and I guess next export will generate those build files which I can use for hosting the site. I do not want to do a SSR.

[styxlab]

Thanks. Will close this thread because I don't want to blur the initial topic. Will open a new one for 'next export'.