[es-dev-serve] serving the build version doesn't work on IE11 while keeping external dependencies #805

jdvivar · 2019-09-17T10:29:38Z

Steps to reproduce

Scaffold a new test-wc

npm init @open-wc --type scaffold --scaffoldType wc --features  --tagName test-wc --writeToDisk true --installDependencies npm

Following @open-wc recommendations, add a rollup build process
2.1. Add rimraf, rollup and @open-wc/building-rollup

npm i -D @open-wc/building-rollup rollup rimraf es-dev-server

2.2. Add a trivial index.html at the root to satisfy the build process:

<!DOCTYPE html>
<html>
    <head>
        <script type="module" src="test-wc.js"></script>
    </head>
    <body>
        <test-wc></test-wc>
    </body>
</html>

2.3. Add a compatibility rollup config file rollup.config.js to the root, keeping lit-html and lit-element as external dependencies:

import { createCompatibilityConfig } from '@open-wc/building-rollup';

const configs = createCompatibilityConfig({ input: './index.html' });

export default configs.map(config => ({
    ...config,
    external: [
        'lit-element',
        'lit-html'
    ]
}));

2.4. Add a script to build the wc and another one to serve it, in package.json:

"build": "rimraf dist && rollup --config rollup.config.js",
"start:build": "es-dev-server --app-index dist/index.html --compatibility all --node-resolve --open",

Build and serve the project:

npm run build && npm run start:build

Check that everything works fine in Chrome, Safari, Firefox... but not in IE11:

The text was updated successfully, but these errors were encountered:

thepassle · 2019-09-18T09:59:03Z

I've been debugging this problem for a bit. Im a bit confused on why you'd use --node-resolve on your build output. When you use the external option, rollup doesnt seem to do anything to those paths, which means they'll stay as bare module specifiers, eg: import {LitElement} from 'lit-element';, no browser supports this

So I guess in a way this may be a bug in the dev server (specifically the problem seems to be in the es module lexer as far as I can see, on this line. The lexer seems to return something completely different when the request comes from ie than from chrome, which makes sense somewhat, but maybe @LarsDenBakker knows some more about this)

but the real problem is you now have bare module specifiers in your build output, which don't work on any browser (unless you're using import maps, but thats not a standard yet)

jdvivar · 2019-09-18T14:40:42Z

Hi Pascal, thank you for looking into it.

In my real world example, some components will be importing others, but they won't all live in the same repository. For the sake of this example, I assumed lit-element would be of these other components. If I don't set the module as external, rollup will add it in the bundle (in the same big file), creating huge components that don't share anything one with another. To solve this problem, ideally all components will be available for the rollup build, and I guess rollup (à la webpack) will bundle them separately. But to integrate these components with an old architecture, I specifically do need to build them up individually.

For my example to be complete and more representative, all imported modules have to be compiled to ES5/amd (they're not), but as you said, I have come to the conclusion a front end server with a module resolver would be necessary to achieve what I need. When using the flag --node-resolve, es-dev-server do solve bare module imports for Chrome correctly, but not for IE11. In my complete example, even solving them correctly won't work on IE11 because, as said before, no ES5/amd modules have being made available, however that's not the reason why it is not working.

Moving forward, we will focus more on an architecture based on a component catalog instead.

LarsDenBakker · 2019-09-18T17:31:41Z

What you're doing is fine, but you need some way to provide lit-element at runtime.

Because you have the --node-resolve flag turned on, es-dev-server will resolve the lit-element import to an actual path to the file before serving your application.

This doesn't work on IE11, because there you're not loading es modules but a systemjs build of your application. The --node-resolve flag only works on es modules, for development the server it will transform modules to a compatible format on the fly for IE11.

You'd have to think about how you're going to provide lit-element at runtime, and use that to run the build. For example you could use import maps, they're polyfillable using es-module-shims or you could consider using systemjs on all browsers and use it's import map functionality. I believe rollup also supports different ways for providing external libraries at runtime.

jdvivar · 2019-09-19T09:37:23Z

Thanks for the input! I have a much clearer idea now about what's wrong with the code 👍

jdvivar closed this as completed Sep 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[es-dev-serve] serving the build version doesn't work on IE11 while keeping external dependencies #805

[es-dev-serve] serving the build version doesn't work on IE11 while keeping external dependencies #805

jdvivar commented Sep 17, 2019 •

edited

thepassle commented Sep 18, 2019

jdvivar commented Sep 18, 2019

LarsDenBakker commented Sep 18, 2019 •

edited

jdvivar commented Sep 19, 2019

[es-dev-serve] serving the build version doesn't work on IE11 while keeping external dependencies #805

[es-dev-serve] serving the build version doesn't work on IE11 while keeping external dependencies #805

Comments

jdvivar commented Sep 17, 2019 • edited

Steps to reproduce

thepassle commented Sep 18, 2019

jdvivar commented Sep 18, 2019

LarsDenBakker commented Sep 18, 2019 • edited

jdvivar commented Sep 19, 2019

jdvivar commented Sep 17, 2019 •

edited

LarsDenBakker commented Sep 18, 2019 •

edited