[systemjs] new URL question

[long-woo]

Describe the bug

When I upgraded from 3.04 to 3.2.2, the new URL('../assets/imgs/logo.svg', import.meta.url).href code did not work properly under the micro frontend system, after analysis Found that version 3.2.2 of vite will import.meta.url -> self.location.

Reproduction

https://stackblitz.com/edit/vitejs-vite-vf9tp2?file=apps/vitte-app/src/App.vue

Steps to reproduce

pnpm i
pnpm dev

System Info

System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 996.69 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.0.0 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/.npm-global/bin/yarn
    npm: 7.20.5 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 95.0.2
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-basic-ssl: ^0.1.2 => 0.1.2 
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0 
    @vitejs/plugin-vue-jsx: ^2.1.0 => 2.1.0 
    vite: ^3.2.2 => 3.2.2

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

I don't understand what exactly is the issue of using self.location instead of import.meta.url as they should work the same. Is this an issue specific to the microfrontend system? If this is only a question, maybe this can be moved as a discussion.

[long-woo]

Indeed, within a single application it works fine. This problem exists when using the importmap method under the micro-frontend architecture, and the resources of the sub-application are not in the main application.

• single application: https://stackblitz.com/edit/vitejs-vite-3gyv7v?file=src/App.vue

<script setup lang="ts">
const vueLogo = new URL('./assets/vue.svg', import.meta.url);
</script>

<template>
  <img :src="vueLogo" class="logo vue" alt="Vue logo" />
</template>

• micro-frontend: https://stackblitz.com/edit/vitejs-vite-vf9tp2?file=apps/vitte-app/src/App.vue

<script setup lang="ts">
// it works
const currentUrl = new URL('', import.meta.url);
const viteLogo = new URL('/vite.svg', currentUrl.origin + currentUrl.pathname);

// it is not working
const vueLogo = new URL('./assets/vue.svg', import.meta.url).href;</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img :src="viteLogo" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img :src="vueLogo" class="logo vue" alt="Vue logo" />
    </a>
  </div>
</template>

[leifmarcus]

I have also the same issue and I think, that it should be possible to requests media assets from the same origin as the js files. I remember in an early version of Vite there was the same discussion with the javascript assets. It did not work with js files either. So I wonder, why there was the decision to transform import.meta.url to self.location for all other assets. This would make no sense for a lot of projects.
Does someone know if this will be changed at some point?

[bluwy]

IIRC we use self.location to down-transpile for lower browser support, but since Vite 4, the baseline target support requires import.meta. Maybe we can revisit in the next major to stick with import.meta.url instead.