The production environment uses new URL(src, import.meta.url) to report an error

[rennzhang]

Describe the bug

I can display pictures in the development environment, but import.meta.url after packaging is undefined, and cause the New URL to report.

I have already viewed other questions, most of them are previous versions, if it is a duplicate problem or my usage error, then I am very sorry!

Reproduction

https://github.com/RennCheung/import-meta-url-demo

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 2.56 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^1.9.4 => 1.9.4 
    @vitejs/plugin-vue-jsx: ^1.2.0 => 1.2.0 
    vite: ^2.6.13 => 2.6.13

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 https://github.com/vuejs/vue-next 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.

[ydcjeff]

This is technically not a bug. Vite only supports string or template literals for new URL.

So either using new URL('../../assets/logo.svg', import.meta.url); or new URL('../../assets/${src}', import.meta.url); works.

[rennzhang]

However, the current major problem is not the path problem of the first parameter, but import.meta.url is available in the development environment, but the production environment is a undefined, and will result in an error:

[ydcjeff]

This is because import.meta.url is not supported in Vite baseline target, so it will be undefined. It works in esnext build target.

[rennzhang]

So I can understand because of the avoidance of browser compatibility, so it does not support such a way of writing by default, but is it necessary to have additional configuration?

Can I add more detailed description at Vite document?

Then there will be a more flexible introduction method for img src?

[ydcjeff]

You can use import.meta.url without additional configuration. Vite will perform necessary transform for its basline browser support.

The only exception is url of new URL should be either string or template literals.

For the documentation, there are already examples shown for that features with string and template literals.

So maybe a word of note that new URL only works with string and template literals. But I'm not sure.

Another option is since it already works with template literals, do we also want to work with variables?

cc @patak-js for visibility.

[Niputi]

marking as documentation as i can understand from @ydcjeff this feature is statically analyzed which means variables can't be used.
reference to similar issue #5478

[rennzhang]

I am very sorry, after I tested again, I found out where the problem is.

You can refer to the case of my pass, and the new URL is used inside the component to receive a path. This is no problem in the development environment. It is not the problem of this API, but introduced logo.svg is not packaged to dist / assetsIn the middle, it causes an error, as follows:

I am not very clear here, isn't my configuration? vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  // publicDir: "/",
  resolve: {
    alias: {
      "@/": new URL("./src/", import.meta.url).pathname,
    },
  },
});

My technology is very general, still want to ask you, thank you very much.

[ydcjeff]

@RennCheung An example usage here: https://stackblitz.com/edit/vitejs-vite-yddvqw?file=src/components/HelloWorld.vue

[rennzhang]

Ok, trouble, thank you again.

[wanliyunyan]

This is because import.meta.url is not supported in Vite baseline target, so it will be undefined. It works in esnext build target.

@ydcjeff the build target has been set esnext，it still not work，and import.meta.url is undefined. Another, if build target is es2015, how do I dynamically reference image??

[wanliyunyan]

@RennCheung An example usage here: https://stackblitz.com/edit/vitejs-vite-yddvqw?file=src/components/HelloWorld.vue

image is not found

[wChenonly]

@ydcjeff Why does vite only support strings?

[andrewdavidcostello]

I am unsure if this is related but some libraries have now started to use import.meta.url (mostly to import wasm files), I may be doing something wrong but it seems like this either:

1. Is undefined in anything bundled from node_modules or
2. Is an object { url: URL, hot reload } (I have forgotten the exact name of the reload key)

Is there any way to ensure that import.meta.url is treated the same even with libraries and across envs?

I should mention console logging import.meta.url works fine in the source code.

May be somewhat related to the comment here https://github.com/jamsinclair/jSquash so going to try the optimizeDeps exclusions.

[gaomeng1900]

This is caused by the esbuild target config. import.meta is a es2020 feature but vite@2 set default target under es2019.

You need to set esbuild target manually here.

This issue also happens in development.
#5270

I wonder if there is any special reason to set default target to es2019 since this usage is preferred in official document but does not work under es2019.

[gaomeng1900]

PR #7279

[fend25]

Did you try such Vite config:

{
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020'
    }
  },
  build: {
    target: 'es2020'
  }
}

Still new URL('.', import.meta.url) throws an error.
#7364

[gaomeng1900]

@fend25

According to the error you got #7364 .

[vite:asset-import-meta-url] EISDIR: illegal operation on a directory, read

I would guess that Vite will search the pattern new URL when building. And read the file your URL points to. But when you write new URL('.', import.meta.url). It actually points to a directory rather than a file. So an error is thrown when Vite tries to read the file and "inline" it or move it to the dist.

I would recommend you to change it to a specific file and try it again.

I don't think you can actually inline a folder into the dist code. Also, it's not practical to identify all the actual files if you use the URL as a dynamic string. Even though new URL('.', import.meta.url) is totally legal. It has to be disabled to make it work.

[gaomeng1900]

I suggest that Vite check if the URL target is inline-able when building and give a friendly error.

Also, we need to add another warning in the document if this is not fixable.

[wizardpisces]

Any progress？
Source:
new URL(relativePath,import.meta.url)

Scenario:
Development ok;
Production build and run throw error: "TypeError: Failed to construct 'URL': Invalid URL;"

Source production built to:
let import_meta = {};new URL(relativePath,import_meta.url);
in which import_meta.url is undefined