Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles and fonts in the head tag of index.html are not reflecting for react. #32

Closed
JayaKrishnaNamburu opened this issue Mar 29, 2021 · 7 comments · Fixed by #36
Closed
Assignees
Labels
bug Something isn't working

Comments

@JayaKrishnaNamburu
Copy link
Contributor

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

@alexnm
Copy link
Collaborator

alexnm commented Apr 19, 2021

I have to reopen this as I'm reverting a change in the bundler (conflict with some use cases in codesandbox)

@alexnm
Copy link
Collaborator

alexnm commented May 10, 2021

waiting for codesandbox/codesandbox-client#5723 to be merged

@plondon
Copy link

plondon commented Jul 10, 2021

Hi @alexnm any update on this?

@alexnm
Copy link
Collaborator

alexnm commented Jul 12, 2021

unfortunately no, still waiting on codesandbox/codesandbox-client#5723 to be merged

@plondon
Copy link

plondon commented Jul 5, 2022

@danilowoz any update on this?

@danilowoz
Copy link
Member

danilowoz commented Jul 21, 2022

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 ([iframe isolation]: react-devtools 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

@danilowoz
Copy link
Member

It should no longer be an issue after Nodebox and static server template

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants