diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index a47fa6860..67f40d0b3 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -71,6 +71,13 @@ function SandpackRoot(props: SandpackProps) { const codeSnippets = Children.toArray(children) as React.ReactElement[]; const files = createFileMap(codeSnippets); + if ('/index.html' in files) { + throw new Error( + 'You cannot use `index.html` file in sandboxes. ' + + 'Only `public/index.html` is respected by Sandpack and CodeSandbox (where forks are created).' + ); + } + files['/src/styles.css'] = { code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'), hidden: !files['/src/styles.css']?.visible, diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index a457d2175..8e468452e 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -57,12 +57,13 @@ Then add these lines of code at the top of your main JavaScript file (it might b -```html index.html hidden +```html public/index.html hidden My app +
``` @@ -119,7 +120,7 @@ This lets you find that HTML element with [`document.getElementById`](https://de -```html index.html +```html public/index.html My app diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index a2bef6bf2..54e7a7f1d 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -144,7 +144,7 @@ Usually, you only need to run this code once at startup. It will: -```html index.html +```html public/index.html My app @@ -375,7 +375,7 @@ You can use the `onUncaughtError` root option to display error dialogs: -```html index.html hidden +```html public/index.html hidden @@ -606,7 +606,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k -```html index.html hidden +```html public/index.html hidden @@ -885,7 +885,7 @@ You can use the `onRecoverableError` root option to display error dialogs: -```html index.html hidden +```html public/index.html hidden diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index c54b6fe11..b1eeca30c 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -406,7 +406,7 @@ You can use the `onUncaughtError` root option to display error dialogs: -```html index.html hidden +```html public/index.html hidden @@ -641,7 +641,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k -```html index.html hidden +```html public/index.html hidden @@ -922,7 +922,7 @@ You can use the `onRecoverableError` root option to display error dialogs for hy -```html index.html hidden +```html public/index.html hidden diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 0107c20d3..c04510f80 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -252,7 +252,7 @@ Portals can be useful if your React root is only part of a static or server-rend -```html index.html +```html public/index.html My app diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index c97120eba..c6be96fde 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -226,7 +226,7 @@ If you render multiple independent React applications on a single page, pass `id -```html index.html +```html public/index.html My app