Navbar: Menu Item: Caret / Arrow Is Invisible When Deployed On Azure SWA (using MSAL)

BenjaminYde 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

Problem

When building & serving the docusaurus app and serving local, everything works as expected. When deploying to our Azure SWA, the menu item carets / arrows are invisible. The core functionality / dropdowns still work as expected. See the following images:

Build Local:

Deployed on SWA:

Reproducible demo

No response

Steps to reproduce

See description

Expected behavior

See description

Actual behavior

See description

Your environment

Public source code: /
Public site URL: /
Docusaurus version used: 3.1.1
Environment name and version: 20.11.1
Operating system and version: Azure SWA
Hosting: Azure Static Web App
Security: Azure Service Principal

Self-service

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

Packages

{
  "name": "my-website",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids"
  },
  "dependencies": {
    "@azure/msal-browser": "^2.38.3",
    "@azure/msal-react": "^1.5.12",
    "@docusaurus/core": "^3.1.1",
    "@docusaurus/preset-classic": "^3.1.1",
    "@docusaurus/theme-search-algolia": "^3.1.1",
    "@easyops-cn/docusaurus-search-local": "^0.40.1",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^1.2.1",
    "docusaurus-lunr-search": "^3.3.2",
    "meilisearch-docsearch": "^0.6.0",
    "prism-react-renderer": "^2.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@azure/static-web-apps-cli": "^1.1.1",
    "@docusaurus/module-type-aliases": "^3.1.1",
    "@docusaurus/types": "^3.1.1"
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "node": ">=18.0"
  }
}

slorber commented 7 months ago

I'm sorry but it's not possible to help you without a minimal repro. Or at least being able to see your site source code and access your live production url.

Use https://docusaurus.new to try to recreate the conditions that lead to the problem.

If it is Azure specific and you can't provide us more information, we can't help you sorry.

BenjaminYde commented 7 months ago

Fixed it by doing it myself. I added the following in the custom.css file:

.menu__caret::before {
  background-repeat: no-repeat;
  background-size: 1rem;
  background-image: url('/static/img/navbar/arrow.png');
}

facebook / docusaurus