TypeError [ERR_INVALID_URL]: Invalid URL

[jianjiachenghub]

Have you read the Contributing Guidelines on issues?

• I have 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 Vercel to deploy the Docusaurus site, But report an error when packing online, "TypeError [ERR_INVALID_URL]: Invalid URL", And local packaging will not report this error.

I consulted Vercel’s members, feedback that it is Docusaurus’s problem. They think hardcoding the url in docusaurus is what conflicting the problem? Unfortunately, docusaurus doesn't generate helpful error to give more verbose information.

• minimal reproducible repository（try minimal_reproducible branch）：https://github.com/jianjiachenghub/frontend-document/tree/minimal_reproducible (docs/VercelError/README.md)

You can see my history Commit. There is no modification of deployment related configuration, but some can be deployed successfully.I just modified the content of the Markdown file, so I can make the deployment fail or succeed. This looks abnormal.

[14:39:02.935] Cloning github.com/jianjiachenghub/frontend-document (Branch: minimal_reproducible, Commit: 5f02832)
[14:39:06.674] Cloning completed: 3.739s
[14:39:06.866] Restored build cache
[14:39:06.907] Running "vercel build"
[14:39:07.345] Vercel CLI 28.13.2
[14:39:07.959] Warning: Detected "engines": { "node": ">=16.14" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
[14:39:07.969] Running "install" command: `npm install`...
[14:39:16.115] 
[14:39:16.115] up to date, audited 1087 packages in 8s
[14:39:16.258] 
[14:39:16.258] 28 vulnerabilities (4 moderate, 23 high, 1 critical)
[14:39:16.258] 
[14:39:16.258] To address issues that do not require attention, run:
[14:39:16.258]   npm audit fix
[14:39:16.258] 
[14:39:16.258] Some issues need review, and may require choosing
[14:39:16.258] a different dependency.
[14:39:16.258] 
[14:39:16.258] Run `npm audit` for details.
[14:39:16.602] 
[14:39:16.602] > frontend-document@0.0.1 build
[14:39:16.602] > docusaurus build
[14:39:16.602] 
[14:39:18.135] [INFO] [zh-Hans] Creating an optimized production build...
[14:39:18.910] [info] [webpackbar] Compiling Client
[14:39:18.929] [info] [webpackbar] Compiling Server
[14:39:24.030] [success] [webpackbar] Client: Compiled with some errors in 5.13s
[14:39:24.034] 
[14:39:24.035] 
[14:39:24.035] TypeError [ERR_INVALID_URL]: Invalid URL
[14:39:24.035] [ERROR] Client bundle compiled with errors therefore further build is impossible.
[14:39:24.070] Error: Command "npm run build" exited with 1

Reproducible demo

No response

Steps to reproduce

1. Use Vercel to import project（https://github.com/jianjiachenghub/frontend-document/tree/minimal_reproducible）
2. Use Vercel's online deployment capabilities

Expected behavior

Local and online packaging is normal

Actual behavior

Local packaging is normal, but Vercel's online packaging fails

Your environment

• Public source code: https://github.com/jianjiachenghub/frontend-document/tree/minimal_reproducible
• Public site URL:
• Docusaurus version used: ^2.3
• Environment name and version (e.g. Vercel Node.js 16.x):
• Operating system and version (e.g. Amazon Linux 2):

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Thank you for taking time to create a minimal repro! That was very helpful.

FYI, it succeeds when you add spaces around the URL:

比如在 www.baidu.com 下开启控制台，然后写入Cookie：

This is because of how MDX extracts links. You can try this in the MDX playground:

You'll see that it parses the link all the way to the end of the line.

I don't think there's much we can do on our side. The DX is terrible, so maybe we can throw a better error, or simply skip nodes that contain invalid URLs.

[slorber]

With MDX 2 the link extraction is moved to the GFM (github flavored markdown) remark plugin.
https://github.com/remarkjs/remark-gfm

The bug is still reproducible on the MDX 2 playground once the GFM plugin is turned on (in the options tab):

https://mdxjs.com/playground/

Looks like a bug to fix in remark-gfm? cc @wooorm

---

Note, it looks like even GitHub has this bug? so 🤷‍♂️

比如在 www.baidu.com下开启控制台，然后写入Cookie：

[wooorm]

It's not a bug in remark-gfm, as you show, that's exactly how GH works. Which is the point of remark-gfm!
I recommend "full" links: [label](url)

[slorber]

Thanks @wooorm 👍

So I guess we can close.

Possible solutions, that are all out of the Docusaurus scope:

• Use full Markdown links [label](url) (much simpler solution)
• Ask GitHub to fix this behavior, so that remark-gfm can do exactly the same
• Use your own remark-gfm fork if you want to diverge from the official GitHub/GFM behavior (requires MDX 2, coming in Docusaurus v3)

[Josh-Cena]

IMO, the DX is quite terrible. The error is thrown from our own link visitor, and, disabling that, the page at least gets rendered and the user will be able to see the incorrect link in deploy preview and know how to fix it. We should make the link visitor not throw on invalid URLs.

[slorber]

👍 ok to improve the DX on this case.

It could also throw a more relevant error message suggesting to use a markdown link? 🤷‍♂️