TypeError [ERR_INVALID_URL]: Invalid URL

[jianjiachenghub]

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

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] > [email protected] 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? 🤷‍♂️

[yoloz]

also get it, while so many md files and no idea to find this url or file, need more error messages

[yoloz]

i am here related to nodejs version config:

 "dependencies": {
    "@docusaurus/core": "^2.4.3",
    "@docusaurus/preset-classic": "^2.4.3",
    "@easyops-cn/docusaurus-search-local": "^0.26.1",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.2.1",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "^2.4.3"
  }

• Using Node:v18.18.0 Npm:9.8.1 ok
• Using Node:v16.20.2 Npm:8.19.4 ok

Azure static wep app(Oryx) use node:v18.17.1 npm:9.6.7 will cause this error, at last i config node version.

[lorchr]

i meet the same error, its just print

TypeError: Invalid URL
[ERROR] Client bundle compiled with errors therefore further build is impossible.

but didnt locate which file (or line) cause this error.

[yoloz]

i meet the same error, its just print

TypeError: Invalid URL
[ERROR] Client bundle compiled with errors therefore further build is impossible.

but didnt locate which file (or line) cause this error.

• can find URL from files for this change that mentioned above;
• can wait for upgrade;
• have a try node version;

good lucky 🤝

[wilfred-s]

docusaurus: 2.4.1 node.js 18.17

Ran into the same issue, no changes in the content just moved from node 16.14 to 18.17 and got the error.

✖ Client
  Compiled with some errors in 27.56s

TypeError: Invalid URL
TypeError: Invalid URL
TypeError: Invalid URL
client (webpack 5.76.3) compiled with 3 errors

Was able to track down more detail by running the development server yarn docusaurus start and the local URL shows a more detailed errors like this:

Compiled with problems:
×ERROR in ./docs/developer_guide/env_setup.md
Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
TypeError: Invalid URL
    at new NodeError (node:internal/errors:405:5) 

In my case the error was triggered by the text [email protected], not really a URL. That text has been in our documentation for more than a year, and in two older revisions, and never caused an issue.

[slorber]

@wilfred-s we'd need a full md document repro here. If your doc contains sensitive data you can trim if down to a minimal version as long as we can still reproduce the issue. Also it's possible that this is fixed in Docusaurus v3.0 (coming very very soon)

[wilfred-s]

This is the simplest file I could get it to replicate with, Just one sentence with nothing else in the file really: env_setup.md

Full error and stacktrace, taken from the running dev server:

Compiled with problems:
ERROR in ./docs/developer_guide/env_setup.md
Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:405:5)
    at Url.parse (node:url:445:17)
    at Object.urlParse [as parse] (node:url:167:13)
    at processLinkNode (/yunikorn-site/node_modules/@docusaurus/mdx-loader/lib/remark/transformLinks/index.js:77:37)
    at /yunikorn-site/node_modules/@docusaurus/mdx-loader/lib/remark/transformLinks/index.js:97:27
    at overload (/yunikorn-site/node_modules/unist-util-visit/index.js:27:12)
    at visit (/yunikorn-site/node_modules/unist-util-visit-parents/index.js:56:27)
    at visit (/yunikorn-site/node_modules/unist-util-visit-parents/index.js:67:75)
    at visit (/yunikorn-site/node_modules/unist-util-visit-parents/index.js:67:75)
    at visitParents (/yunikorn-site/node_modules/unist-util-visit-parents/index.js:29:26)

For the full site source code see: https://github.com/apache/yunikorn-site