Sandpack examples with index.html files throw runtime errors #6487

Activity

1. drumst0ck

   added a commit that references this issue on Dec 15, 2023

   fix(sandpack-template): use custom react sandpack template (#6484)

   ...

   e98c393
2. geeseyj commented on Dec 15, 2023

   

   geeseyj

   on Dec 15, 2023

   Contributor

   More actions

   Taking a look at this.
3. geeseyj commented on Dec 15, 2023

   

   geeseyj

   on Dec 15, 2023

   Contributor

   More actions

   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.
4. mattcarrollcode

   closed this as completedin bb65aceon Dec 15, 2023
5. mattcarrollcode

   added a commit that references this issue on Jan 31, 2024

   Fix reactjs#6487 specify which `Sandpack` files go into a `src` direc…

   ...

   This issue will close once commit bb65ace is merged into the 'main' branch.

   bb65ace