mkdocs-material: Builds on Vercel are broken

I just want to report a strange behavior I’m seeing with some deployments to Vercel. It might be a Vercel issue, it might be a MkDocs issue or it might be an issue of this theme, I’m really not sure so please bear with me.

I’m creating a docs site that’s in its early stages here: https://docs-aouokdqlf.now.sh/. I cannot share the repo but I’ve created a clone with basically an identical setup:

https://github.com/borekb/mkdocs-vercel-demo

This demo repo always works for me but with our real docs site, when the Vercel service does the build (i.e., Vercel runs mkdocs build -d output), the deployments are broken. In fact, so broken that my Chrome becomes basically unresponsive and Firefox wants to kill the site after a few moments:

Screenshot 2020-05-13 at 10 36 02

An example of such broken deployment is https://docs-45uy3tha0.now.sh/. Note how the UI is rendered but even hovering over links doesn’t make them clickable. Something is very broken there and at first debugging attempts, I didn’t figure out what.

A couple of observations:

  • Since the demo repo deploys fine, can it be that our contents is causing this? Maybe the built-in search indexes some strange unicode character (emoji) and then crashes? But perhaps unlikely because:
  • In our real repo, I can do this:
# Build to `output`
docker run --rm -it -p 8000:8000 -v ${PWD}:/docs squidfunk/mkdocs-material build -d public

# Start a local dev server and browse the output
cd public
ws   # This is https://www.npmjs.com/package/local-web-server
→ Docs running at http://localhost:8000

These docs run perfectly fine.

  • Can it be that my requirements.txt are different than what is in Dockerfile and that’s the cause of the Vercel build failing? (I copied requirements.txt from the current master in this repo though.)

Project configuration

Our mkdocs.yml
site_name: SOFA docs
docs_dir: content

# Keep this in sync with `content/index.md` (tip: copy/paste from there & apply some VSCode-fu)
nav:
  - 'Home': index.md
  - 'Introduction':
      - 'What is Shoptet Premium': introduction/shoptet-premium.md
      - 'What is SOFA': introduction/sofa.md
  - 'Tutorial':
      - '01: Create project': tutorial/01-create-project.md
      - '02: Build UI': tutorial/02-build-ui.md
      - '03: Fetch data': tutorial/03-fetch-data.md
      - '04: Implement cart': tutorial/04-implement-cart.md
      - '05: Implement checkout': tutorial/05-implement-checkout.md
      - '06: Deploy to lab': tutorial/06-deploy-to-lab.md
      - '07: Deploy to prod': tutorial/07-deploy-to-prod.md
  - 'Guides':
      - 'TypeScript': guides/typescript.md
      - 'Routing': guides/routing.md
      - 'Data fetching': guides/data-fetching.md
      - 'Styling': guides/styling.md
      - 'Images': guides/images.md
      - 'Localization': guides/localization.md
      - 'Structured data': guides/structured-data.md
      - 'GTM + data layer': guides/gtm-data-layer.md
      - 'Cart & checkout': guides/cart-checkout.md
      - 'Tooling': guides/tooling.md
      - 'Advanced GraphQL topics': guides/advanced-graphql.md
      - 'Deployments': guides/deployments.md

theme:
  name: material
  custom_dir: mkdocs-overrides
  features:
    - instant
  palette:
    primary: white
    accent: indigo
  logo: https://user-images.githubusercontent.com/101152/81295258-701e6b00-9070-11ea-9fbc-3f7d0c07c6d3.png

extra_css:
  - mkdocs.css

markdown_extensions:
  - admonition
  - codehilite:
      guess_lang: false
  - toc:
      permalink: true
  - pymdownx.tasklist:
      custom_checkbox: true

Package versions

Locally, I use Docker. When sent to Vercel, this requirements.txt is used:

https://github.com/borekb/mkdocs-vercel-demo/blob/7b5f816a9689a633e3bcd07d9f4f71bab53f3822/requirements.txt

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 25 (11 by maintainers)

Most upvoted comments

🎉 both of these work:

  • Docker:
    • docker run --rm -v ${PWD}:/docs squidfunk/mkdocs-material:5.1.7 build
  • Local (not fixed to any particular version but currently works):
    1. pipenv install mkdocs-material
    2. pipenv run mkdocs build

Thank you!