Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support new URL("./image.png", import.meta.url) Asset modules #894

Closed
xiaoxiangmoe opened this issue Oct 11, 2020 · 10 comments
Closed

Support new URL("./image.png", import.meta.url) Asset modules #894

xiaoxiangmoe opened this issue Oct 11, 2020 · 10 comments
Labels
enhancement New feature or request

Comments

@xiaoxiangmoe
Copy link
Contributor

Webpack 5 support new URL("./image.png", import.meta.url) as asset modules.

Can vite support it?
@remorses
Copy link
Contributor

it will work in development with any file, to work in build mode you should use the public directory (the files in public will be copied by rollup to out directory)

@yyx990803 yyx990803 added the enhancement New feature or request label Jan 8, 2021
@yyx990803
Copy link
Member

Should be possible with https://modern-web.dev/docs/building/rollup-plugin-import-meta-assets/

@jiangfengming
Copy link

Here you go https://www.npmjs.com/package/rollup-plugin-import-meta-url-to-module

@xiaoxiangmoe
Copy link
Contributor Author

@jiangfengming Your plugin is not type-safe. It's URL in IDE and it's string after compile.

@jiangfengming
Copy link

@jiangfengming Your plugin is not type-safe. It's URL in IDE and it's string after compile.

fixed.

@xiaoxiangmoe
Copy link
Contributor Author

@jiangfengming What's difference with @web/rollup-plugin-import-meta-assets?

example: https://modern-web.dev/docs/building/rollup-plugin-import-meta-assets/#examples

@jiangfengming
Copy link

jiangfengming commented Jan 27, 2021 •
edited

@jiangfengming What's difference with @web/rollup-plugin-import-meta-assets?

example: https://modern-web.dev/docs/building/rollup-plugin-import-meta-assets/#examples

That plugin just doesn't work with vite.

If put it into plugins field, the code would be transformed into new URL(import.meta.ROLLUP_FILE_URL_1, import.meta.url), but import.meta.ROLLUP_FILE_URL_1 is undefined at runtime.

If put it into build.rollupOptions.plugins section, the generated code would be something like new URL(new URL("foo.688baecb.png",t.url).href,t.url)', but t.url(import.meta.url) is undefined` in production build. So it will fail to construct URL because lack of origin.

And @web/rollup-plugin-import-meta-assets doesn't obey build.assetsInlineLimit option.

@rdmurphy
Copy link

rdmurphy commented Mar 13, 2021 •
edited

I've been poking on this as well (I'm also familiar with and have used @web/rollup-plugin-import-meta-assets in other contexts) and ultimately the issue (though not without reason) rests with esbuild here. esbuild is pretty strict about honoring a minimum target of es2019 and essentially gives up on import.meta by converting it into {}. This is because technically import.meta didn't become spec until es2020. It just works in vanilla Rollup because it leaves it as-is in esm mode and rewrites it away in the other build modes.

I'm not quite sure what the answer would be for vite here — it's ideally something handled upstream at esbuild. An alternative is vite handles morphing any use of import.meta.url itself so esbuild doesn't get the chance to alter it. In theory this is also true for dynamic imports (an es2020 feature that explicitly gets ported back) so there is a minor precedence.

Semi-related esbuild issue here: evanw/esbuild#795

@kabouzeid kabouzeid mentioned this issue Apr 13, 2021
Merged
@karlhorky
Copy link
Contributor

karlhorky commented Apr 22, 2021 •
edited

Here's a demo of the new syntax with ES Modules without a bundler:

https://codesandbox.io/s/import-image-paths-in-js-without-bundler-cbqpk

Code:

<!DOCTYPE html>
<html>
  <body>
    <img />
    <script type="module">
      const url = new URL("./wp.png", import.meta.url);
      document.querySelector("img").src = url;
    </script>
  </body>
</html>

@sodatea
Copy link
Member

sodatea commented Jul 15, 2021

Supported since v2.4 4cbb40d

@sodatea sodatea closed this as completed Jul 15, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Jul 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@rdmurphy @yyx990803 @karlhorky @sodatea @xiaoxiangmoe @jiangfengming @remorses