Tabs not working on Docusaurus Static build

ColinLondon commented 7 months ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] 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

I am using Docusarus Static as an offline template. I have a tabs arrangement as a test in a .md file:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

This runs just fine on the development server (npm run start), with the tabs switching on click, as expected.

But when I build the site (npm run build+postprocess) the tabs display okay, but I cannot client to switch tabs.

Reproduce by using the code segment above and then run with the commands shown.

Reproducible demo

No response

Steps to reproduce

Step 1. Using this code on a page:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

Step 2: Run npm run start. Tabs work as expected.

Step 3: Run npm run build+postprocess. In the build, the tabs display okay, but with no tab switching.

Expected behavior

Tabs not switchable on build.

Actual behavior

No interaction.

Your environment

Public source code:
Public site URL:
Docusaurus version used:
Environment name and version (e.g. Chrome 89, Node.js 16.4):
Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

[ ] I'd be willing to fix this bug myself.

slorber commented 7 months ago

There is no "postprocess" thing in Docusaurus

This likely creates hydration mismatches, and you should not alter the output html otherwise the React app can't hydrate.

You should provide a https://docusaurus.new repro, giving us a clear way to see the problem in action for a given Docusaurus version.

Until then I consider it's not a bug but a bad usage of Docusaurus

Tabs work perfectly fine for hundreds of sites, including ours, so you must be doing something unusual. https://docusaurus.io/docs/markdown-features/tabs

ColinLondon commented 7 months ago

The official documentation specifically calls for a post-process:

https://editocttrialtools-octospacc-7b2d9ca9cd24bce25d929d67488fd8f33dc.gitlab.io/docusaurus-static/docs/docusaurus-static/setup-immediate/index.html

And there is a docusaurus-static-postprocess.js file included in the downloadable package.

Here's the website for it:

https://editocttrialtools-octospacc-7b2d9ca9cd24bce25d929d67488fd8f33dc.gitlab.io/docusaurus-static/index.html

Please re-open this issue. It is working on hundreds of websites because, as I said, it works on the dev server. But it is not working offline.

Josh-Cena commented 7 months ago

@ColinLondon Whatever it is that you are using, it is not Docusaurus. Please send your issue to their project because they are using Docusaurus in a way that we neither endorse nor recommend.

ColinLondon commented 7 months ago

@Josh-Cena Thanks for that. I never realised. Their site is identical to the official Docusaurus one. I guess it's back to square one to figure out how to make Docusaurus work offline (I'm not a dev). Thanks again.

slorber commented 7 months ago

Indeed it's not our project, it's a project from @andrigamerita introduced here: https://github.com/facebook/docusaurus/issues/3825#issuecomment-1913656755

We can't support you using it.

It looks quite new and experimental so although the approach could be interesting I'm not sure I'd recommend it for now, unless you clearly understand the tradeoffs you make here (and you'd rather be a dev for that).

facebook / docusaurus