Skip to content

ESM browser module distribution depends on unsupported import #694

New issue
New issue
Open
Open
ESM browser module distribution depends on unsupported import#694
Labels
docsConcerns the documentation content or the documentation website
@ghost

Description

@ghost
ghost
opened on Jan 4, 2021

Version

4.0.2

Reproduction link

https://besenwagen.github.io/vue-router-next-broken-esm-browser-dist/

Steps to reproduce

  1. Open reproduction URL in a browser
  2. Observe TypeError in console

What is expected?

The ES module import is resolved.

What is actually happening?

A TypeError is thrown because 'vue' is not resolvable.

Activity

posva

posva commented on Jan 5, 2021

@posva
posva
on Jan 5, 2021
Member

I'm aware of this but I couldn't find any standard/agreement on how to write an import on a browser module file without forcing the user to use a specific CDN (which I can't)...

One (quite complicated) way to deal with this is to use a service worker to redirect the request for vue' to a CDN like unpkg or jsdelivr.

FYI, in vue router 3 we handled this the same way it is handled here: vuejs/vue-router#2705

I'm open to suggestions!

posva
added
discussionThis problem still needs more feedback
questionFurther information is requested
on Jan 5, 2021
ghost

ghost commented on Jan 5, 2021

@ghost
ghost
on Jan 5, 2021

One (quite complicated) way to deal with this is to use a service worker to redirect the request for vue' to a CDN like unpkg or jsdelivr.

The module URL must be resolved before a request can be initiated (and intercepted). Parsing the message property of a caught exception isn't complicated but madness. Sounds like a job for jQuery. 😂

FYI, in vue router 3 we handled this the same way it is handled here: vuejs/vue-router#2705

I saw that after opening this issue, thanks. It is extremely discouraging that the Vue 2 ecosystem did allow coding like it's 2015. ☹

I'm open to suggestions!

I wish I had any. At this point I fail to see te use case of these build artefacts. The answer is appreciated, anyhow.

ghost

ghost commented on Jan 17, 2021

@ghost
ghost
on Jan 17, 2021

One (quite complicated) way to deal with this is to use a service worker to redirect the request for vue' to a CDN like unpkg or jsdelivr.

While it's not possible to intercept bare modules because that fails before there is a request, it turns out it's still possible to create a workaround with a service worker:

  • fetch the modules from a CDN
  • replace the bare imports with URLs in the response body
  • put the results in the cache

It's quite mad, but still better than using the global legacy build for modern development without Node.

posva
mentioned this on Feb 23, 2021
Trojaner
mentioned this on Feb 24, 2021
posva

posva commented on Apr 2, 2021

@posva
posva
on Apr 2, 2021
Member

Currently, one needs to use Skypack or https://www.chromestatus.com/feature/5315286962012160 (chrome only). I think this will make sense as a cookbook entry once these topics are more mature

posva
added
docsConcerns the documentation content or the documentation website
on Apr 2, 2021
ghost

ghost commented on Apr 12, 2021

@ghost
ghost
on Apr 12, 2021

Skypack or https://www.chromestatus.com/feature/5315286962012160

Thanks, both were new to me. Cookbook entries and generally more documentation would be great, esm-browser in a CDN file name raises expectations that are not currently met.

Alanscut
mentioned this on Apr 16, 2021
posva
mentioned this on May 26, 2021
Alanscut
mentioned this on May 26, 2021
kngai

kngai commented on Jun 16, 2021

@kngai
kngai
on Jun 16, 2021 · Hidden as spam
posva
mentioned this on Jul 5, 2021
SepVeneto
mentioned this on Jul 26, 2021
posva
removed
questionFurther information is requested
discussionThis problem still needs more feedback
on Jan 27, 2022
posva
mentioned this on May 25, 2022
AimForNaN

AimForNaN commented on Oct 20, 2022

@AimForNaN
AimForNaN
on Oct 20, 2022

vue-router.esm-browser.prod.js for latest version doesn't exist (though I'm not sure if that would remove the dependency). @vue/devtools-api dependency is very inconvenient. While import maps are a quick workaround, I would prefer to be without such a dependency for production.

posva
mentioned this on Jan 9, 2023
stefnotch

stefnotch commented on Feb 17, 2023

@stefnotch
stefnotch
on Feb 17, 2023 · edited by stefnotch

It looks like every browser, other than old Safari, supports import maps
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

I suppose it would be possible to use the ESM browser module, and add a documentation note about "this needs an import map polyfill if you're targeting Safari".

posva
mentioned this on May 17, 2023
charlesprescottcollins

charlesprescottcollins commented on Sep 27, 2023

@charlesprescottcollins
charlesprescottcollins
on Sep 27, 2023

So how does one work around this with skypack?

9mm

9mm commented on Nov 1, 2023

@9mm
9mm
on Nov 1, 2023

So I'm trying to use vue-router in browser with import maps... how do I workaround these errors?

pin "vue",                           to: "https://unpkg.com/vue@latest/dist/vue.esm-browser.prod.js"
pin "vue-router",                    to: "https://esm.sh/vue-router"

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";

This is failing with devtools errors?

blacelle

blacelle commented on Aug 30, 2024

@blacelle
blacelle
on Aug 30, 2024

Until @vue/devtools-api is dropped (e.g. into some vue-router.esm-browser.prod.js), one way to move forward is:

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
    "vue-router": "https://unpkg.com/vue-router@4.4.3/dist/vue-router.esm-browser.js",
    "@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.2.1/lib/esm/index.js"
  }
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    docsConcerns the documentation content or the documentation website

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @posva@charlesprescottcollins@9mm@blacelle@kngai

        Issue actions
          ESM browser module distribution depends on unsupported import · Issue #694 · vuejs/router