Subscribe on changes!

Cannot resolve external img at build

avatar
May 5th 2020

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 an svg 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
avatar
May 5th 2020

https://github.com/vuejs/vite/blob/01135fa1edede1f46acd7c83d18e5131ebc7cbd7/src/node/buildPluginCss.ts#L13

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*\))/

avatar
May 6th 2020

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

avatar
May 6th 2020

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)