Styles and fonts in the head tag of index.html are not reflecting for react.
JayaKrishnaNamburu opened this issue · 7 comments
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 codesandbox/codesandbox-client#5723 to be merged
unfortunately no, still waiting on codesandbox/codesandbox-client#5723 to be merged
@danilowoz any update on this?
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 (codesandbox/sandpack-bundler#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
It should no longer be an issue after Nodebox and static server template