Internet Explorer is blank

[williamtang007]

I use vue-cli-service build and vue-cli-service serve to build my app. I only load CKEditor modules if we're not using IE. Otherwise, I do not render the ckeditor component and I do not import it (I actually import it with require, since it's inside a condition.

The app works well with all browser (Firefox, Chrome and IE) when I do vue-cli-service build. However, if I do vue-cli-service serve to make a build, IE shows a blank page.

[Mgsy]

Currently, CKEditor 5 isn't compatible with IE11. However, we made some research about running CKE5 in IE11, so you can read more about it in the proper ticket - ckeditor/ckeditor5#330.

[ma2ciek]

Currently, CKEditor 5 isn't compatible with IE11.

Yep, but the question seems to be quite different - @williamtang007 tries to make the app work on IE without running editor 😄

I don't have such knowledge to tell you how the vue-cli-service build differs from vue-cli-service serve. After all, the whole script is bundled by webpack, so maybe the conditional import isn't 100% "pure" when you run it on vue's dev server (vue-cli-service serve). Since our builds are written in ES6, which IE doesn't support, and there's no error in your console it's hard to tell actually what happens.

[williamtang007]

Currently, CKEditor 5 isn't compatible with IE11.

Yep, but the question seems to be quite different - @williamtang007 tries to make the app work on IE without running editor

I don't have such knowledge to tell you how the vue-cli-service build differs from vue-cli-service serve. After all, the whole script is bundled by webpack, so maybe the conditional import isn't 100% "pure" when you run it on vue's dev server (vue-cli-service serve). Since our builds are written in ES6, which IE doesn't support, and there's no error in your console it's hard to tell actually what happens.

Hi, thank you for your reply. After doing some trial and errors, and made it work. I will explain later. But first, here's what I can conclude about how vue-clie-service serve and vue-cli-service build work.

First, when I use vue-cli-service build, although I used a conditional import for CKEditor, what I thought was that webpack will import the module only when I go on that page/component that uses CKEditor. However, this seems to be wrong. In fact, all the components are loaded before I start navigating inside my Vue app. Hence, the components' import are also loaded (not matter if they are inside a condition or not. This point is important, because the module needed to be included with webpack even before the page loads. Hence, that means the condition is a bit useless, since the detection of IE browser is only done after.

Basing myself on this hypothesis, I tried to use Vuejs components lazy loading feature. This allows for webpack to not send certain components to the browser only when needed. This brought me a little closer to the solution. In fact, I was now able to at least to not have a blank Internet Explorer page. However, whenever I navigate with Vuejs to the route that calls the component which includes CKEditor, Internet Explorer crashes.

A quick fix to this was to use the router.beforeEach function and to redirect the user to a error page if it detects the use of IE.