Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs not working on Docusaurus Static build #9853

Closed
2 of 7 tasks
ColinLondon opened this issue Feb 15, 2024 · 5 comments
Closed
2 of 7 tasks

Tabs not working on Docusaurus Static build #9853

ColinLondon opened this issue Feb 15, 2024 · 5 comments
Labels
bug An error in the Docusaurus core causing instability or issues with its execution closed: invalid This issue / PR is low quality, unwanted or spam and doesn't qualify as a contribution in any way. external This issue is caused by an external dependency and not Docusaurus.

Comments

@ColinLondon
Copy link

Have you 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

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.
@ColinLondon ColinLondon added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Feb 15, 2024
@slorber slorber added closed: invalid This issue / PR is low quality, unwanted or spam and doesn't qualify as a contribution in any way. and removed status: needs triage This issue has not been triaged by maintainers labels Feb 15, 2024
@slorber
Copy link
Collaborator

slorber commented Feb 15, 2024

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

@slorber slorber closed this as not planned Won't fix, can't repro, duplicate, stale Feb 15, 2024
@ColinLondon
Copy link
Author

ColinLondon commented Feb 15, 2024

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
Copy link
Collaborator

@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.

@Josh-Cena Josh-Cena added the external This issue is caused by an external dependency and not Docusaurus. label Feb 15, 2024
@ColinLondon
Copy link
Author

@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
Copy link
Collaborator

slorber commented Feb 15, 2024

Indeed it's not our project, it's a project from @andrigamerita introduced here:
#3825 (comment)

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution closed: invalid This issue / PR is low quality, unwanted or spam and doesn't qualify as a contribution in any way. external This issue is caused by an external dependency and not Docusaurus.
Projects
None yet
Development

No branches or pull requests

3 participants