Cannot resolve external img at build
Using an external image like https://images.unsplash.com/photo-1551434678-e076c223a692
or https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80
on an img
tag on a vue file fails on build with different errors messages depending on the filename. It does work on dev.
I also noticed other bugs on img
that might be related:
- an
src
to ansvg
file also fails at build with
ReferenceError: _imports_0 is not defined
at eval (eval at evaluateConstant (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2841:16), <anonymous>:1:1)
at evaluateConstant (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2841:53)
at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2784:29)
at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20)
at stringifyElement (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2800:16)
at stringifyNode (/Users/posva/vite-mafacture/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2816:20) {
code: 'PLUGIN_ERROR',
plugin: 'vue',
hook: 'transform',
id: '/Users/posva/vite-mafacture/App.vue?vue&type=template&id=fd594680',
- Relatives urls without a leading
./
cannot be found
I was going to post an issue on inline images that start with url('data:image/...) but I think its related to your issue.
For what it's worth, adding a negative lookahead: (?!data:) fixed my issue with build.
const urlRE = /(url\(\s*['"]?(?!data:))([^"')]+)(["']?\s*\))/
Probably needs expanded with http, anchor refs - for example:
const urlRE = /(url\(\s*['"]?(?!data:|http|#))([^"')]+)(["']?\s*\))/
That's great! I think the error itself is very confusing and it would be helpful to have an error about the non-working import instead of a ReferenceError
This is not a regex issue. That regex is used for CSS only.
Fixed in https://github.com/vuejs/vue-next/commit/d66211849ca174c4458b59d3df5569730ee224f6
SVG src problem should've been fixed by https://github.com/vuejs/vue-next/commit/f9a3766fd68dc6996cdbda6475287c4005f55243 (which requires 3.0.0-beta.9)