Sapper legacy mode: CSS not loaded on route change #1505
Comments
@benmccann you're on the browserstack account :) |
Sapper 0.28.7 is out now. Can you test with the new version? |
Thanks @benmccann. Bad news, I'm afraid this version is crashing completely on legacy browsers. I'm getting error 500 Can repro with the normal sapper-template, just bump the Sapper version number. Tested with Chrome 54, Firefox 53 on Browserstack, Mac & Windows machines. |
I just tried using our BrowserStack account and didn't have any issues loading the rollup template with IE 11. The file Though I think |
I think IE11 is working for you because the client bundle isn't being executed at all (because, as you say, |
It works for me in IE11 on both first page load and navigating between pages, but I do see an issue in Chrome 54:
I see that shimport is being used, but it looks like it's erroring:
|
It works for me on IE11 too but I suspect that is because the client JS is not executing at all and you are essentially navigating a server-rendered site. I could be way off though! I really don't know anything about shimport but according to the blurb on that repo it works for all kinds of import types. |
Yeah, I think you're right. I see an error in the console in IE 11:
|
The error we're getting in Chrome 54 is
|
Is the |
Sapper has a Rollup plugin that adds it. See my last comment that shows where it's coming from. We use shimport to support import statements in legacy browers, but it doesn't support |
@rodoch I can't reproduce this error with https://github.com/antony/sapper-ie. I wonder if you have your IE babel config, polyfills, etc. setup the same way as that project? |
I was getting this error with just the base sapper-template project where the only change I made was to bump Sapper up to 0.28.7. Do you reckon this behaviour is being polyfilled somehow in the sapper-ie project? I am familiar with it and I have other sites with a similar setup. I will investigate. |
I think IE is still broken after all. I think it was simply that the script was entirely broken, so it was doing a server-side navigation and looked like it was working |
I'm following the new PRs a little - thanks for your work on this. I'm not sure IE was ever supported out of the box. I'd be happy just to see the basic template working on 2016+ versions of Chrome, Firefox, Safari, Edge. IE support could be addressed in @antony's sapper-ie template (I realise that is not an official repo, but I'd be happy to contribute to it. I don't think Sapper ever held out IE support officially.) |
|
Describe the bug
This issue occurs when using a production build (
npm run build
) of Sapper created with the--legacy
flag in a browser which relies on the legacy code (i.e. a browser with no native support forasync/await
syntax).When navigating from Page A to page B the CSS associated with the page B route is not loaded and the contents of page B remain unstyled. This does not affect the styling of any components already loaded on page A.
Logs
When testing this in Chrome 54 the console displays the following errors:
However, this appears to be unrelated to the problem. Removing the service worker from the project and rebuilding does not alleviate the issue.
To Reproduce
I've created a minimal repro here: https://github.com/rodoch/sapper-legacy-repro
This is simply a copy of the sapper-template repo with Sapper & Svelte versions bumped to 0.28.6 and 3.25.0 respectively. To reproduce the problem you need to use a 'legacy' browser. I have reproduced with Chrome <= 54 and Safari <= 9 (via BrowserStack and on an old Windows machine).
localhost:3000/blog
. This page is styled correctly:This behaviour is not evident if you start on the homepage and move to the blog, presumably because a sufficient set of styles have been applied on initial page load when moving in this direction. With more complex apps this behaviour can be observed on all navigations subsequent to the initial page load.
Expected behavior
The relevant styles should be applied with each route change.
Information about your Sapper Installation:
npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers
Discussed above.
Local + Azure deployment.
npm run export
) or dynamic applicationDynamic.
Severity
This is blocking any migration to v0.28 for me.
Additional context
I noticed a similar issue to this with modern browsers after initially migrating to v0.28.x. These issues appeared to be fixed in 0.28.6. I wonder if perhaps those changes didn't extend to the legacy mode.
I should also point out that all of necessary files (both JS and CSS) appear to be generated in
__sapper__/build
dir. They are simply not requested/applied on navigation.I'm not sure if this part is relevant but it appears to be on a legacy browser that all assets which are loaded are requested from
client/assets
and notclient/legacy/assets
.The text was updated successfully, but these errors were encountered: