sandpack
sandpack copied to clipboard
codesandbox
Styles and fonts in the head tag of index.html are not reflecting for react.
I am trying to render the same project in code-sandbox and sandpack. Looks likes anything in the head of index.html is not reflecting in the render output.
I am not sure, if the error is on the side of bundler or config of the project.
Here is the link for codesandbox --> https://codesandbox.io/s/1cugh?file=/public/index.html Here is the sandpack implementation to render the same project --> https://repl.teleporthq.io/project/9ea7c3fc-46b3-4dcb-bb01-01bdecdd99f1
I have to reopen this as I'm reverting a change in the bundler (conflict with some use cases in codesandbox)
waiting for https://github.com/codesandbox/codesandbox-client/pull/5723 to be merged
unfortunately no, still waiting on https://github.com/codesandbox/codesandbox-client/pull/5723 to be merged
Unfortunately, this is not something easy to fix. Jasper has tried many ways to collect and execute scripts into the Sandpack context, but with no success so far (#5723 and #5964). Plus, if we inject third scripts in the same Sandpack thread, it might create unexpected issues due to conflict javascript execution, so I'm afraid there is a way to go now.
Possible paths:
- Create another iframe inside Sandpack iframe (iframe isolation): we explored this option, but it turned out it didn't work due to the complexity of passing iframe messages (https://github.com/codesandbox/sandpack-bundler/pull/19);
- Node emulation, which will be our next try: run a light node version on the browser, which would solve this and unblock many other possibilities. It looks promising;
So meanwhile, I'd recommend continuing using the externalResources API to load scripts and styles: https://sandpack.codesandbox.io/docs/getting-started/custom-content#static-external-resources
