diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js
index 55ad4b128e..4286a6338d 100644
--- a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js
+++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.js
@@ -23,7 +23,10 @@ const createJSX = (node, pathUrl) => {
   const jsxNode = node;
   jsxNode.type = 'jsx';
   jsxNode.value = `<img ${node.alt ? `alt={"${escapeHtml(node.alt)}"} ` : ''}${
-    node.url ? `src={require("${escapePath(pathUrl)}?${assetQuery}")}` : ''
+    node.url
+      ? // see https://github.com/facebook/docusaurus/pull/4708#discussion_r624515715
+        `src={new URL("${escapePath(pathUrl)}?${assetQuery}", import.meta.url)}`
+      : ''
   }${node.title ? ` title="${escapeHtml(node.title)}"` : ''} />`;
 
   if (jsxNode.url) {
diff --git a/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js b/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js
index d75bdcb576..51e3e583d0 100644
--- a/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js
+++ b/packages/docusaurus-mdx-loader/src/remark/transformLinks/index.js
@@ -45,9 +45,9 @@ function toAssetRequireNode({node, filePath, requireAssetPath}) {
     ? relativeRequireAssetPath
     : `./${relativeRequireAssetPath}`;
 
-  const href = `require('${escapePath(
+  const href = `new URL('${escapePath(
     relativeRequireAssetPath,
-  )}?${assetQuery}')`;
+  )}?${assetQuery}', import.meta.url).toString()`;
   const children = (node.children || []).map((n) => toValue(n)).join('');
   const title = node.title ? `title="${escapeHtml(node.title)}"` : '';
 
diff --git a/website/docs/guides/markdown-features/markdown-features-assets.mdx b/website/docs/guides/markdown-features/markdown-features-assets.mdx
index 2fa4dd8a81..b9398ca949 100644
--- a/website/docs/guides/markdown-features/markdown-features-assets.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-assets.mdx
@@ -75,7 +75,10 @@ or
 
 <a
   target="_blank"
-  href={require('../../assets/docusaurus-asset-example-pdf.pdf')}>
+  href={new URL(
+    '../../assets/docusaurus-asset-example-pdf.pdf',
+    import.meta.url,
+  ).toString()}>
   Download this PDF
 </a>