From cd61c7bddc4f3a5af0f57433026bea7720cc3b98 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Fri, 21 Jul 2023 21:16:10 +0800
Subject: [PATCH] fix(core): handle single quotes inside file paths (#9160)

---
 packages/docusaurus-utils/src/pathUtils.ts           | 8 ++++++--
 packages/docusaurus/src/server/index.ts              | 5 +++--
 website/_dogfooding/_docs tests/beginner's guide.mdx | 3 +++
 3 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 website/_dogfooding/_docs tests/beginner's guide.mdx

diff --git a/packages/docusaurus-utils/src/pathUtils.ts b/packages/docusaurus-utils/src/pathUtils.ts
index d8d221a17e1b..d812f0490a6e 100644
--- a/packages/docusaurus-utils/src/pathUtils.ts
+++ b/packages/docusaurus-utils/src/pathUtils.ts
@@ -96,12 +96,16 @@ export function aliasedSitePath(filePath: string, siteDir: string): string {
  * When you have a path like C:\X\Y
  * It is not safe to use directly when generating code
  * For example, this would fail due to unescaped \:
- * `<img src={require('${filePath}')} />`
- * But this would work: `<img src={require('${escapePath(filePath)}')} />`
+ * `<img src={require("${filePath}")} />`
+ * But this would work: `<img src={require("${escapePath(filePath)}")} />`
  *
  * posixPath can't be used in all cases, because forward slashes are only valid
  * Windows paths when they don't contain non-ascii characters, and posixPath
  * doesn't escape those that fail to be converted.
+ *
+ * This function escapes double quotes but not single quotes (because it uses
+ * `JSON.stringify`). Therefore, you must put the escaped path inside double
+ * quotes when generating code.
  */
 export function escapePath(str: string): string {
   const escaped = JSON.stringify(str);
diff --git a/packages/docusaurus/src/server/index.ts b/packages/docusaurus/src/server/index.ts
index 914752004715..ab50c1883d31 100644
--- a/packages/docusaurus/src/server/index.ts
+++ b/packages/docusaurus/src/server/index.ts
@@ -179,7 +179,7 @@ export default ${JSON.stringify(siteConfig, null, 2)};
 ${clientModules
   // Use `require()` because `import()` is async but client modules can have CSS
   // and the order matters for loading CSS.
-  .map((clientModule) => `  require('${escapePath(clientModule)}'),`)
+  .map((clientModule) => `  require("${escapePath(clientModule)}"),`)
   .join('\n')}
 ];
 `,
@@ -193,7 +193,8 @@ ${Object.entries(registry)
   .sort((a, b) => a[0].localeCompare(b[0]))
   .map(
     ([chunkName, modulePath]) =>
-      `  '${chunkName}': [() => import(/* webpackChunkName: '${chunkName}' */ '${modulePath}'), '${modulePath}', require.resolveWeak('${modulePath}')],`,
+      // modulePath is already escaped by escapePath
+      `  "${chunkName}": [() => import(/* webpackChunkName: "${chunkName}" */ "${modulePath}"), "${modulePath}", require.resolveWeak("${modulePath}")],`,
   )
   .join('\n')}};
 `,
diff --git a/website/_dogfooding/_docs tests/beginner's guide.mdx b/website/_dogfooding/_docs tests/beginner's guide.mdx
new file mode 100644
index 000000000000..ea7a8796f38d
--- /dev/null
+++ b/website/_dogfooding/_docs tests/beginner's guide.mdx	
@@ -0,0 +1,3 @@
+# Beginner's guide
+
+[#9160](https://github.com/facebook/docusaurus/pull/9160)