Navigate to page sections using # doesn't work

mohamedsaleh1984 commented 10 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.
[X] I have tried the npm run clear or yarn clear command.
[X] 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.
[X] I have read the console error message carefully (if applicable).

Description

when you paste the url including the section, the browser doesn't navigate to the section mentioned after # in th URL

https://dev2-everoed.evero.com/docs/-screen-descriptions/billing/billing_billing_claimbatchpending#raise-issue-button

You can notice the scroll doesn't move down to the bottom of the page.

Reproducible demo

No response

Steps to reproduce

Open https://dev2-everoed.evero.com/docs/-screen-descriptions/billing/billing_billing_claimbatchpending
Click Videos on the right side
Copy the URL https://dev2-everoed.evero.com/docs/-screen-descriptions/billing/billing_billing_claimbatchpending#raise-issue-button
Paste in new tab (Doesn't scroll to videos) as original page does

Expected behavior

scroll down to the section mentioned from the URL # value

Actual behavior

The scroll doesn't move down to the section

Your environment

Public source code: NA
Public site URL: https://dev2-everoed.evero.com/
Docusaurus version used: 3.0.0
Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Version 118.0.5993.89
Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows

We have created Test user account for you Username: etester Password: DocusaurusTest123!

Self-service

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

slorber commented 10 months ago

This is not a Docusaurus bug, but a bad config of your host.

Your host should serve the appropriate static html file built by Docusaurus, but does not currently and always serve first the html of your homepage. It's only React that finally fixes the UI by rendering the correct page client-side.

This can easily be seen because your homepage "flashes" when you load any page.

This is what I see if I disable JS for example.

If your host is configured properly then you should see the good page content even with JS disabled.

If you don't know how to host a static deployment, then use Vercel, Netlify or another CDN that does it correctly for you out of the box. We can't help you configuring appropriately your custom setup.

mohamedsaleh1984 commented 10 months ago

we have built custom compoenent to serve dynamic content. This is our docusourus config file., package if you have can spot an issue please let me know. The project was setup many years ago and I don't know what's the correct setup for it.

docusaurus.config.js

const path = require("path");
const isDevelopment = process.env.NODE_ENV == "development";

module.exports = {
  onBrokenLinks: "ignore",
  title: "Our Digital Learning Repository",
  tagline:
    "eVero Ed is home to eVero-made resources and provides quick access to guidance documents, videos and recordings, a listing of scheduled webinars, and detailed release notifications.",
  url: "https://evero.com",
  baseUrl: "/",
  baseUrlIssueBanner: false,
  favicon: "img/Ed_MorePolished2.svg",
  organizationName: "evero",
  projectName: "ed",
  customFields: {
    isDev: isDevelopment,
    devServer: "https://localhost:44312",
  },
  scripts: [
    {
      src: "/external/accessibe.js",
      async: true,
    },
    {
      src: "https://static.evero.com/evero-shared-all.js",
      async: true,
    },
  ],
  themeConfig: {

    navbar: {
      title: "eVero Ed",
      logo: {
        alt: "eVero Ed Logo",
        src: "img/FlatEd.png",
      },
      items: [
        {
          type: "doc",
          label: "Guidance",
          position: "left",
          className: "spacing-nav-item",
          docId: "home",
        },
        {
          type: "docSidebar",
          position: "left",
          label: "Screen Descriptions",
          sidebarId: "barScreenDescriptions",
          className: "spacing-nav-item",
        }
        ,
        {
          to: "videos-v2",
          label: "Videos",
          position: "left",
          className: "spacing-nav-item",
        },
        {
          to: "webinars",
          label: "Webinars",
          position: "left",
          className: "spacing-nav-item",
        },
        {
          type: "doc",
          label: "Release Notifications",
          position: "left",
          className: "spacing-nav-item",
          sidebarId: "barNotifications",
          docId: "releases",
        },
        {
          to: "contact-us",
          label: "Contact Us",
          position: "left",
          className: "spacing-nav-item",
        },
      ].filter((x) => !!x),
    },
    footer: {
      style: "dark",
      links: [
      ],
      copyright: `Copyright © ${new Date().getFullYear()} eVero Corporation`,
    },
  },
  presets: [
    [
      "@docusaurus/preset-classic",
      {
        docs: {
          sidebarPath: require.resolve("./sidebars.js"),
          // editUrl: "https://github.com/facebook/docusaurus/edit/master/website/"
        },
        blog: {
          showReadingTime: true,
          // editUrl: "https://github.com/facebook/docusaurus/edit/master/website/blog/",
        },
        theme: {
          customCss: require.resolve("./src/css/custom.css"),
        },
      },
    ],
  ],
  plugins: [
    require.resolve("docusaurus-lunr-search"),
    path.resolve(__dirname, "./plugins/event-plugin"),
    // '@docusaurus/plugin-google-gtag'
  ],
};

package.json

{
  "name": "evero-da-documentation",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "prodtest":"rm -r build & npm run build & cd build & npx http-server & explorer http://192.168.222.52:8081/"
  },
  "dependencies": {
    "@docusaurus/core": "2.4.1",
    "@docusaurus/plugin-content-pages": "2.4.1",
    "@docusaurus/plugin-google-gtag": "2.4.1",
    "@docusaurus/preset-classic": "2.4.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.15",
    "@mdx-js/react": "^1.6.21",
    "autocomplete.js": "^0.38.0",
    "clsx": "^1.1.1",
    "docusaurus-lunr-search": "^2.1.14",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.29.1",
    "react": "^16.8.4",
    "react-big-calendar": "^0.33.5",
    "react-debounce-input": "^3.2.4",
    "react-dom": "^16.8.4",
    "react-router-dom": "^5.2.0",
    "use-debounce": "^7.0.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

slorber commented 10 months ago

The bug is likely not in your docusaurus project, but in your hosting config. We can't help fixing it.

If you run docusaurus serve it should work fine.

facebook / docusaurus