Alpha v75 causes Markdown imports to exponentially increase compilation time, rendering my website impossible to compile

[Zamiell]

🐛 Bug Report

In my Docusaurus website, I have import statements at the top of my Markdown files for the purposes of showing diagrams as React components. When upgrading to Docusaurus v75, these import statements make the development server impossible to start, as it hangs forever.

My website works completely fine on the previous version of 70.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

1. Install Python 3 (e.g. apt install python3)
2. pip install svgwrite
3. git clone git@github.com:hanabi/hanabi.github.io.git
4. cd hanabi.github.io.git
5. git checkout -b doc-bug
6. npm install
7. npm run start
8. Observe that compilation takes around 6.5 seconds.
9. Open the "beginner.md" file. Move a single import statement on line 17 up a line so that it is no longer commented out. Save the file.
10. npm run start
11. Observe that compilation takes around 22 seconds.
12. Open the "beginner.md" file. Move another import statement up so that it is no longer commented out. Save the file.
13. npm run start
14. Observe that compilation never completes.

Expected behavior

I expect my website to compile like it has been doing on previous versions of this software. On v70, it compiles in around 20 seconds with hundreds of import statements in around 30 different Markdown files.

Actual Behavior

The website does not compile.

[RDIL]

Hey, webpack 5 dude here. Sorry to hear this is happening! I'll take a look for you.

[RDIL]

Can confirm, will be working to figure out why exactly this is. Sorry about that!

[slorber]

running "npm ci" fails for me

also, can't run after "npm install":

[Zamiell]

@slorber As the error message implies, you have to first run pip install svgwrite. I guess that needs to be included in the instructions, my apologies.

[Zamiell]

@RDIL Thanks for looking, did you find anything?

[slorber]

@Zamiell please don't assume I know anything about Python because I don't 😅

I had not planned to learn about how to make python 3 the default on macos or how to handle a requirements.txt file (because obviously "pip install yaml" does not work")

Now it seems to work, but it was quite time-consuming to get there 😓

---

It seems your site builds, but there are a lot of broken links reported at the end, is this normal?

[Zamiell]

Hey Slorber, thanks for taking a look. On MacOS, you simply use brew (i.e. brew install python).

It seems your site builds, but there are a lot of broken links reported at the end, is this normal?

Yes, it is normal because in order to find the problem, I had to "comment out" (i.e. remove) the entire docs folder, and then just re-introduce one file, beginner.md.

[slorber]

brew install python did not change the python --version, had to alias python to python3.

So, you upgraded from alpha 70 to alpha 75. The problem is also there on alpha74 (using Webpack 4), and it's not a Webpack 5 bug.

I found out we have a very slow regex trying to extract a top-level doc markdown title, ignoring the mdx exports above it.

Reported another bug report here for clarity: #4726, and going to close this one.

A workaround to solve this regex problem is to add a md title above the MDX imports, or to not use MDX imports at the very top of the file.

---
id: beginner
title: Beginner's Guide
---

# Beginner's Guide

import CardLayout1 from '@site/image-generator/yml/beginner/card-layout-1.yml';
import CardLayout2 from '@site/image-generator/yml/beginner/card-layout-2.yml';
import Chop1 from '@site/image-generator/yml/beginner/chop-1.yml';
import Chop2 from '@site/image-generator/yml/beginner/chop-2.yml';
import BasicClue from '@site/image-generator/yml/beginner/basic-clue.yml';

This is useless title duplication, but fixes the perf problem for me.

About your custom plugin, I suggest not importing our getFileLoader() utils and write your own svgr loader, as we are likely to change this: it is internal Docusaurus code, not public API.

[Zamiell]

Awesome, thanks again for looking into this so quickly.

[DarthGandalf]

About your custom plugin, I suggest not importing our getFileLoader() utils and write your own svgr loader

That was me. I just wanted to avoid code duplication, since the svgr loader options in Docusaurus worked fine.

[slorber]

Thanks for reporting this, was not easy to find the issue 😅

About the plugin, it's not a big deal but you'd rather duplicate a few lines rather than being subject to internal changes of Docusaurus. It's likely that this will change again

[DarthGandalf]

Ideally, I'd query webpack itself for the options used to load svg files, except that I didn't find such API.

Sure, we'll just instantiate svgr without calling into your internals, thanks for advice!