Updating to 3.2 breaks tailwind integration in production

Question

Updating to 3.2 breaks tailwind integration in production

razzeee opened this issue 2 months ago · comments

Kolja commented 2 months ago

Have you read the Contributing Guidelines on issues?

I have read the Contributing Guidelines on issues.

Prerequisites

I'm using the latest version of Docusaurus.
I have tried the npm run clear or yarn clear command.
I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
I have tried creating a repro with https://new.docusaurus.io.
I have read the console error message carefully (if applicable).

Description

Upgrading to 3.2 broke the tailwind styling, which I've integrated according to https://medium.com/@bargadyahmed/docusaurus-a-guide-to-seamless-integration-with-tailwind-css-dd202211caac

Here I've added the banner-preview with the custom tailwind integration flathub-infra/documentation@e0dc841 (#272)

It still works fine in dev, but breaks in prod or locally - if I do yarn build and then yarn serve. Unfortunatly the production errors are not helpful.

Basically https://docs.flathub.org/banner-preview/ should be styled. Like this:

Reproducible demo

https://github.com/flathub-infra/documentation

Steps to reproduce

Checkout repo
Run yarn
Run yarn build
Run yarn serve
Goto http://localhost:3000/banner-preview

Expected behavior

The page should be styled like in the above image

Actual behavior

The page isn't styled, presumably because tailwind isn't working, after upgrading to 3.2

Your environment

Public source code: https://github.com/flathub-infra/documentation
Public site URL: https://docs.flathub.org/
Docusaurus version used: 3.2
Environment name and version (e.g. Chrome 89, Node.js 16.4): Shouldn't apply as it's run on github
Operating system and version (e.g. Ubuntu 20.04.2 LTS): Shouldn't apply as it's run on github

Self-service

I'd be willing to fix this bug myself.

Ihor Sychevskyi · Answer 1 · Tue Apr 02 2024 05:39:13 GMT+0800 (China Standard Time)

more example
open-feature/openfeature.dev#489

Eric Chen · Answer 2 · Tue Apr 02 2024 10:49:39 GMT+0800 (China Standard Time)

When using v3.2.0, plugins.configurePostCss(options) api not work anymore, maybe is the reason.

Jinfeng Song · Answer 3 · Tue Apr 02 2024 12:52:29 GMT+0800 (China Standard Time)

I had the same problem when I upgraded to version 3.2 that will lost tailwind css style after npm build, I look forward to a solution to this problem

ozaki · Answer 4 · Wed Apr 03 2024 04:53:31 GMT+0800 (China Standard Time)

~~I don't have any problem with Docusaurus V3 in this sandbox following this guide~~

~~https://stackblitz.com/edit/github-fvf5eb?file=src%2Fpages%2Findex.js~~

See my comment below

Ihor Sychevskyi · Answer 5 · Wed Apr 03 2024 05:12:21 GMT+0800 (China Standard Time)

I don't have any problem with Docusaurus V2 in this sandbox following this guide

https://stackblitz.com/edit/github-fvf5eb?file=src%2Fpages%2Findex.js

Thanks for the example, but it’s not very clear why everything works in the https://openfeature.dev/ version. https://github.com/open-feature/openfeature.dev/blob/main/docusaurus.config.ts#L279

And after updating the dependencies there are no open-feature/openfeature.dev#489

Although, as mentioned above, everything works locally, but in production, alas. https://deploy-preview-489--openfeature.netlify.app/

Ihor Sychevskyi · Answer 6 · Wed Apr 03 2024 05:13:00 GMT+0800 (China Standard Time)

and this is for all projects where I updated dependencies yesterday
AvaloniaUI/avalonia-docs#436
openyurtio/openyurt.io#405

and everyone has the same problem, locally everything is fine, production is not

ozaki · Answer 7 · Wed Apr 03 2024 05:19:54 GMT+0800 (China Standard Time)

Oops my bad, I forgot after trying to reproduce with the base guide the problem is in production

Indeed I have the same error in the sandbox with version 3.2.0 and no issue in version 3.1.0 i'll try to take a look

3.2.0 sanbox dev no issue, prod issue

3.1.0 sandbox dev and prod no issue

Sébastien Lorber · Answer 8 · Wed Apr 03 2024 06:04:56 GMT+0800 (China Standard Time)

Thanks for reporting, it's probably a mistake I did when refactoring things to improve performance.

I'll take a look soon and publish a fix ASAP.

Ivan Mar (sOkam!) · Answer 9 · Thu Apr 04 2024 01:13:02 GMT+0800 (China Standard Time)

@slorber I've seen people report that the bug doesn't trigger on v3.1.0
Whatever broke it, it also fails in the same way with v3.1.1
I went back in history in my repository to a commit that I knew for a fact it worked, removed cache and node_modules to start fresh, and the bug still triggers
In fact, it started triggering with that version running without updating to 3.2.0

~~edit1:~~
~~It might be me calling the old repository by accident. I'm double checking, sorry~~
~~Will edit this comment again after confirming.~~

Edit2: Nope, nvm. It is triggering in v3.1.1 indeed
I removed, specifically, /build, /.docusaurus, /node_modules and package-lock.json to start fresh, and it still triggers.
A teammate tested on their computer, which had not updated since a long time ago, or reset anything, and they don't trigger the issue. We are trying to find why that is the case.

Edit3: It was triggering in ^3.1.1 specifically, which installed 3.2.0 for a reason unknown to our team. See my next comment.

Ivan Mar (sOkam!) · Answer 10 · Thu Apr 04 2024 03:33:13 GMT+0800 (China Standard Time)

Update: We were on ^3.1.1, but it was rounding up to 3.2.0 on install.
So false alarm, it triggers on v3.2.0, and works correctly in v3.1.0

Sébastien Lorber · Answer 11 · Thu Apr 04 2024 19:04:48 GMT+0800 (China Standard Time)

Can you please test canary 0.0.0-5886?
https://docusaurus.io/community/canary

It is the same as v3.2 (no breaking change, but this problem should be fixed)

Ihor Sychevskyi · Answer 12 · Thu Apr 04 2024 19:52:31 GMT+0800 (China Standard Time)

Can you please test canary 0.0.0-5886? https://docusaurus.io/community/canary

It is the same as v3.2 (no breaking change, but this problem should be fixed)

I checked it on all the projects that I support, everything works, only the one had problems with the plugin https://www.npmjs.com/package/docusaurus-plugin-image-zoom

but I think this is not a problem, I deleted it and everything worked, most likely it does not support the canary version or there is another problem.

Thanks for the work.

Kolja · Answer 13 · Thu Apr 04 2024 20:12:00 GMT+0800 (China Standard Time)

Canary seems to work for me too - but I also had to remove a dependency, cause it was expecting a docusaurus version bigger then 3.0

Sébastien Lorber · Answer 14 · Thu Apr 04 2024 20:29:14 GMT+0800 (China Standard Time)

Great 👍

I'll release soon

everything works, only the one had problems with the plugin npmjs.com/package/docusaurus-plugin-image-zoom

Maybe worth opening an issue on that plugin repo. I can't help if I don't know what the problem was.

Canary seems to work for me too - but I also had to remove a dependency, cause it was expecting a docusaurus version bigger then 3.0

Which dependency? Which version are you upgrading from? 2.x?

Kolja · Answer 15 · Thu Apr 04 2024 20:37:23 GMT+0800 (China Standard Time)

Canary seems to work for me too - but I also had to remove a dependency, cause it was expecting a docusaurus version bigger then 3.0

Which dependency? Which version are you upgrading from? 2.x?

Docusaurus 3.2 to the canary

Dependency is docusaurus-plugin-search-local

Probably caused by https://github.com/gabrielcsapo/docusaurus-plugin-search-local/blob/main/package.json#L97

Sébastien Lorber · Answer 16 · Thu Apr 04 2024 21:17:51 GMT+0800 (China Standard Time)

Ah, I see yes, it might prevent you from using a canary due to the 0.0.0 versions. I will try to figure out a solution to improve this.

Sébastien Lorber · Answer 17 · Fri Apr 05 2024 01:49:04 GMT+0800 (China Standard Time)

Fix released in v3.2.1

https://github.com/facebook/docusaurus/releases/tag/v3.2.1