Browser ES module #8820

stefanvanherwijnen · 2021-04-08T15:44:48Z

stefanvanherwijnen
Apr 8, 2021

I have been struggling with Rollup, Vite and JavaScript for a bit. It seems pretty standard to generate a CJS, ESM and UMD build of a package (as Quasar does), but with almost all browsers finally supporting ES modules it seemed like a good idea to ditch CJS and UMD in order to simplify things.

However, of course it's not that simple and importing the Quasar ESM build in the browser results in

Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.

which is obviously caused because there is no 'vue' package. I'm not sure how modules are resolved in the browser but I noticed that Vue provides a separate browser ESM build.

So my question is: would it be possible to build a browser-compatible module of Quasar?

_{And please enlighten me if I'm overlooking anything in the maze of JavaScript modules.}

Edit:
The problem can be solved by using an importmap. Unfortunately, these are not supported by most browsers, but this is where es-module-shims comes in. The following html works for me in Firefox:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="q-app">
      <q-btn label="Test"></q-btn>
    </div>
    <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm-browser.prod.js",
          "@vue/compiler-dom": "https://cdn.jsdelivr.net/npm/@vue/[email protected]/dist/compiler-dom.esm-browser.js",
          "quasar": "https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.esm.prod.js",
          "vue-router": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.esm-browser.js"
        }
      }
    </script>
    <script type="module">
      import { createApp } from 'vue'
      import {Quasar} from 'quasar'

      const app = createApp({
        setup () {
          return {}
        }
      })

      app.use(Quasar)
      app.mount('#q-app')
    </script>
  </body>
</html>

So fortunately Quasar ESM works fine in the browser, and now the question is: would this be a viable alternative to UMD or am I overlooking something?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser ES module #8820

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Browser ES module #8820

stefanvanherwijnen Apr 8, 2021

Replies: 0 comments

stefanvanherwijnen
Apr 8, 2021