Sandpack examples with index.html files throw runtime errors

[LookRain]

1. https://react.dev/learn/add-react-to-an-existing-project#step-2-render-react-components-anywhere-on-the-page

2. https://react.dev/reference/react-dom/createPortal#rendering-react-components-into-non-react-server-markup

The issue seems to be because the index.html files defined in these examples are not used, instead, the public/index.html defined in the template are used

[geeseyj]

Taking a look at this.

[geeseyj]

I opened a PR to revert the breaking change.

The cause is the assumption here that all files within a sandpack example should be nested into a src directory.

react.dev/src/components/MDX/Sandpack/createFileMap.ts

Lines 7 to 12 in e3c25d1

	/**
	* Ideally, we should update all markdown files and all the sandboxes
	* to use the same folder structure to include `src`. However, we can
	* do the same by prepending the root folder on this function.
	*/
	const rootFolder = '/src/';

react.dev/src/components/MDX/Sandpack/createFileMap.ts

Line 30 in e3c25d1

filePath = rootFolder + name;

This breaks examples that use index.html for instance because the merging of objects here results in the template file being used because the given public/index.html has been given the path /src/public/index.html

react.dev/src/components/MDX/Sandpack/SandpackRoot.tsx

Line 82 in e3c25d1

files={{...template, ...files}}

That gives us a couple options for a solution.

1. Make createFileMap know (arguably) too much by giving it a "whitelist" of file paths to not nest in a /src/ directory.
2. Change all the Markdown files 😪 💤 .

At this point unfortunately I think option 2 is the un-sexy, more-correct option.