-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Svelte applications fail to load in IE 11. Similar loading issue with the main site svelte.dev #2621
Comments
If you want to support IE11 you must transpile the code to syntax that it supports and add a Promise polyfill. svelte.dev is not transpiled with IE11 in mind (e.g. Should IE11 be supported for svelte.dev? |
I would expect svelte.dev to enable the legacy build. |
It does, but apparently it's not doing its job correctly. Might need to dig into some Babel stuff - which might be helpful if it means we can improve configuration in sapper-template. However, even with that ironed out, the site uses CSS variables all over the place, which no amount of Babeling is going to help. I'm undecided whether making the site work on IE11 is an important goal. |
Thanks, I will give this a try.
…On Wed, May 1, 2019, 4:52 AM Pavish Kumar R ***@***.***> wrote:
Currently, I am using babel to transpile the code and then I manually add
polyfills to get it working on IE 10 and 11. I haven't faced other IE
specific issues so far. Pollyfills include:
Map, Set (Taken from pollyfill.io)
Promise (rsvp.js library, set global Promise variable to RSVP.Promise)
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#2621 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABREKZPDW5GCTVQ6ACXD4Y3PTCIPZANCNFSM4HJJHJ2Q>
.
|
+1 for IE11 support, it's still widely used in some corners of the globe (wish it wasn't but it is). We use a Svelte CSS variables pre-processing step in our workflow that works well. |
I'm going to close this issue. As suggested above, with the correct polyfills, svelte can be made to work in IE. For anyone interested, this is my webpack.config.js is below. The important updates are:
|
@Conduitry Does that mean the 'legacy' compile flag is supposed to transpile ES6 features like arrow functions and such but isn't for some reason at the moment? |
@mrPrateek95 I believe legacy compile flag doesn't transpile ES6 features, rather it changes the code to not use api not present in older browsers, such as dataset. |
For those working with rollup – there's also a way to do it without webpack. I had exactly the same requirement on a project. As I did not find much online, I wrote this blogpost about how I solved it. The trick is to add import babel from 'rollup-plugin-babel';
export default {
…
plugins: [
…,
// compile to good old IE11 compatible ES5
babel({
extensions: [ '.js', '.mjs', '.html', '.svelte' ],
runtimeHelpers: true,
exclude: [ 'node_modules/@babel/**' ],
presets: [
[
'@babel/preset-env',
{
targets: '> 0.25%, not dead',
useBuiltIns: 'usage',
corejs: 3
}
]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
[
'@babel/plugin-transform-runtime',
{
useESModules: true
}
]
]
}),
production && terser()
],
…
} I acutally copied this from |
@swapneshran You will need to add that plugin in your babel configuration. This link should help: |
Sorry for appending to a closed thread, but since this is the first hit that comes up when looking for IE11 and Sapper issues I thought I should post here. Sapper uses document.baseURI in goto and prefetch which isn't supported in IE11 and doesn't appear to be polyfilled by Babel or polyfill.io.
is a hint that this might be biting you. I found this patch which works for me when added to template.html along with the polyfill.io polyfills mentioned in Usage of shimport makes legacy support prohibitively challenging source: webcomponents/webcomponents-platform#2 if ('baseURI' in Node.prototype === false) {
Object.defineProperty(Node.prototype, 'baseURI', {
get: function() {
var base = (this.ownerDocument || this).querySelector('base');
return (base || window.location).href;
},
configurable: true,
enumerable: true
});
} Maybe a polyfill for this could be added to --legacy builds automatically in a future release? |
You can examine the modified Sapper build I made at https://github.com/antony/sapper-ie to determine what pollyfills/rollup config you will need for IE11/Edge support for your own code. I don't think time should be wasted making the Svelte website work in an obsolete browser (IE11) - anybody using that browser is not the target audience of the Svelte website. Lets focus on more important issues. |
Thanks @antony, I'll checkout your project. While I'm happy for svelte/sapper to not consider IE a target market (who would if given a choice) I wish it were true that IE was obsolete, unfortunately that just isn't the case. I realise global/general browser stat counters will tell you it is and if you're building a website for a tween popstar then you're probably right on the money but anyone building B2B apps, particularly if it's for big organisations or government, just don't see what you see. Here are some login stats for one of my projects for the last 6 months:
I realise that part of this thread refers specifically to the svelte website and I wholeheartedly agree that that doesn't need to support IE11, but plenty of developers like myself still do and would like to use Svelte/Sapper. Polyfills are fine, but I couldn't find one for baseURI, so I posted it here to help others. |
I'm not denying the need for IE11 support. I spent weeks figuring out how to get Sapper to support it (hence the project I linked above). Please don't confuse the terms obsolete and unused - the browser has been abandoned by Microsoft, it receives only critical security updates, it is obsolete. I'm not denying it has a userbase, especially in slow-moving corporates and B2B. Luckily we don't have to deal with those as a general rule. I am recommending that the Svelte website doesn't support IE. However, I would encourage Svelte website support for IE if it is a way of dogfooding ongoing legacy browser support. |
Finally someone articulates it very nicely...thanks @assmith! I get tired of millennials thinking that IE is dead and that it can be completely ignored. So thanks for posting the help here on finding the polyfils, very helpful! |
@angelozehr thanks for calling out import buble from 'rollup-plugin-buble';
...
!production && livereload('public'),
// BABEL like transpilation for Edge and IE11 browsers (splitters!)
buble({
objectAssign: 'Object.assign',
}),
production && terser() NB: The |
This comment has been minimized.
This comment has been minimized.
Hey, I had the same error in IE11 and stacked buble on top of babel. It's a bit ugly and may be pretty unperformant in larger scale but buble transpiles everything what babel doesn't. I have no clue why babel is not transpiling that but for now its working fine. EDIT:
|
Ok the problem seems to occur when using .babelrc |
Hi @Mycl95 @tridattran I tried with the workaround suggested in below comments link but still getting error for IE 11. (#2621 (comment), #2621 (comment)) Sample repo https://github.com/varun-etc/sample_web_comp_ie or git clone https://github.com/varun-etc/sample_web_comp_ie.git My webpack.config.js file.
bable.config.js file.
but still getting same error in IE 11, can somebody share sample working svelte app with webpack config & custom elements. |
Does a website for developers, coders, and tech geeks really need to support IE? |
I've just written a small website in Svelte as a test case. We need to support IE11 as many large corporations still have IE11 as their main supported browser. Lots of banks do, telecomms companies etc. Regardless of whether people think Svelte is for "developers, coders, and tech geeks", to get acceptance in large clients it needs IE11 support. Banks have 1000s of Win7 laptops/PCs in used globally, IE11 is going to be around for a while yet in the real world. I've wasted hours today trying to get it to work in IE11. |
It is possible. Look at this repo by @antony that he mentioned earlier in this issue: https://github.com/antony/sapper-ie. I’ve used it myself and it works. |
I'll get into more trouble if I post my opinion on ie🦕🦕 again ;) |
The thing is Svelte has a lot of competition and if ie11 support makes add bloat (and take core team dev time) the lightweight output that's gonna hurt long term. Happy if others find a solution though. |
@MarkFereday @silllli @quantuminformation Just transpile your code as shown in this example using babel with transorm_class and custom_element_class plugins Sample code in babel., also include polyfills listed below in your main page were you are trying to include your web components.
|
We are aware that people need to support IE11. Myself included. That's why I wrote the sapper-ie project. The sapper and svelte templates themselves have smaller, more limited, but working Babel config also. Is transpilation / supporting unmaintained browsers part of Svelte's responsiblity? No. Svelte's job is to output modern Javascript. Is it the job of Babel? Yes. Does the recommended tool for bundling Svelte have first class support for Babel? Yes. So I really don't think there is anything to do here. |
Thanks, that's the link I found last night and that helped me, got it working 1am last night. Happy-ish now, personally I think a link to that from the docs would be good. Nearly everything I have worked on in the last x years requires IE11 support even though we all know the arguments against IE11. These are big companies, can't argue against stupid. p.s. nothing above reduces my enjoyment of using Svelte, just frustration at IE11. |
I don't really want the IE fork to be an official project and I don't want to maintain it. I'll think about how we can better direct people via the FAQ or something though. |
When loading the legacy bundle it is worth using the |
I found this template could support IE 😄 |
IE 11 is heavily entrenched in corporate USA. The reason is because of significant prior investment in ActiveX components. In other words:
Therefore: lack of IE11 support essentially disqualifies Svelte for use in some very large companies at this time. No plainer way to put it, unfortunately. Request:
|
You can run the build through babel. Building or transpiling javascript to
an older format or version isn't within the scope of Svelte, so it isn't
disqualified from anything.
Applications written in Svelte are equally as able to be transpiled to IE11
as is any other javascript application. It's nothing to do with the library.
On Thu, 24 Dec 2020 at 20:47, davidmoshal ***@***.***> wrote:
IE 11 is heavily entrenched in corporate USA.
*The reason is because of significant prior investment in ActiveX
components.*
In other words:
1. Numerous Fortune 1000 companies have no option but to run their
ActiveX components in IE 11.
2. When these companies standardize on a single browser, that browser
is IE 11.
3. Many of these companies do standardize on a single browser.
4. It's unlikely that the Active X based applications will be replaced
in the foreseeable future.
Therefore:
lack of IE11 support essentially disqualifies Svelte for use in some very
large companies at this time.
No plainer way to put it, unfortunately.
Request:
- a way to generate two applications: one optimized for IE11, and the
other optimized for other browsers.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#2621 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABVORJYXTXCDYYEDNMGPRTSWOSGJANCNFSM4HJJHJ2Q>
.
--
…________________________________
ꜽ . antony jones . http://www.enzy.org
|
I thought that's why the new Edge (Chromium) has an "Internet Explorer Mode". |
@robots4life thanks for the magical incantations ! |
A working example here with TypeScsript support as well. Live demo available. |
Digging closer the error is on this line:
const identity = x => x;
I suspect I need a polyfill but there doesn't seem to be an appropriate one.
Svelte version: 3.0.0
The home page: https://svelte.dev/ gives this error:
(as of 30/04/2019)
IE version:
The text was updated successfully, but these errors were encountered: