amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Disallow /index.html in sandboxes (#7430)

Browse Source
This commit is contained in:
Sebastian "Sebbie" Silbermann
2025-01-14 20:29:35 +01:00
committed by GitHub
parent 316230adfc
commit ee8a829f99
6 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/MDX/Sandpack/SandpackRoot.tsx
View File

@@ -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,

5
src/content/learn/add-react-to-an-existing-project.md
View File

@@ -57,12 +57,13 @@ Then add these lines of code at the top of your main JavaScript file (it might b
<Sandpack>
```html index.html hidden
```html public/index.html hidden
<!DOCTYPE html>
<html>
<head><title>My app</title></head>
<body>
<!-- Your existing page content (in this example, it gets replaced) -->
<div id="root"></div>
</body>
</html>
```
@@ -119,7 +120,7 @@ This lets you find that HTML element with [`document.getElementById`](https://de
<Sandpack>
```html index.html
```html public/index.html
<!DOCTYPE html>
<html>
<head><title>My app</title></head>

8
src/content/reference/react-dom/client/createRoot.md
View File

@@ -144,7 +144,7 @@ Usually, you only need to run this code once at startup. It will:
<Sandpack>
```html index.html
```html public/index.html
<!DOCTYPE html>
<html>
<head><title>My app</title></head>
@@ -375,7 +375,7 @@ You can use the `onUncaughtError` root option to display error dialogs:
<Sandpack>
```html index.html hidden
```html public/index.html hidden
<!DOCTYPE html>
<html>
<head>
@@ -606,7 +606,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k
<Sandpack>
```html index.html hidden
```html public/index.html hidden
<!DOCTYPE html>
<html>
<head>
@@ -885,7 +885,7 @@ You can use the `onRecoverableError` root option to display error dialogs:
<Sandpack>
```html index.html hidden
```html public/index.html hidden
<!DOCTYPE html>
<html>
<head>

6
src/content/reference/react-dom/client/hydrateRoot.md
View File

@@ -406,7 +406,7 @@ You can use the `onUncaughtError` root option to display error dialogs:
<Sandpack>
```html index.html hidden
```html public/index.html hidden
<!DOCTYPE html>
<html>
<head>
@@ -641,7 +641,7 @@ You can use the `onCaughtError` root option to display error dialogs or filter k
<Sandpack>
```html index.html hidden
```html public/index.html hidden
<!DOCTYPE html>
<html>
<head>
@@ -922,7 +922,7 @@ You can use the `onRecoverableError` root option to display error dialogs for hy
<Sandpack>
```html index.html hidden
```html public/index.html hidden
<!DOCTYPE html>
<html>
<head>

2
src/content/reference/react-dom/createPortal.md
View File

@@ -252,7 +252,7 @@ Portals can be useful if your React root is only part of a static or server-rend
<Sandpack>
```html index.html
```html public/index.html
<!DOCTYPE html>
<html>
<head><title>My app</title></head>

2
src/content/reference/react/useId.md
View File

@@ -226,7 +226,7 @@ If you render multiple independent React applications on a single page, pass `id
<Sandpack>
```html index.html
```html public/index.html
<!DOCTYPE html>
<html>
<head><title>My app</title></head>