Works in dev build but VueComponent export is missing in production build, causing build failure

[RegisFrey]

Sample project: https://github.com/RegisFrey/vite-svg-error

Reproduction

• Start a new project (yarn create vite-app)
• Follow the directions in the vite-plugin-svg readme:
  • Add the SVG plugin in vite.config.ts
  • Import within a Vue component using the VueComponent export
• Run yarn dev and see the SVG + "hello world" text visible at localhost:3000
• Attempt to run yarn build (production build with rollup) but it errors on the SVG import.

vite-svg-error [master] $  yarn build
yarn run v1.22.4
$ vite build
vite v1.0.0-rc.4
⠸ Building for production...
[vite] Build errored out.
Error: 'VueComponent' is not exported by src/assets/example.svg, imported by src/components/HelloWorld.vue?vue&type=script&lang.js
    at error (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:5206:30)
    at Module.error (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:9687:16)
    at handleMissingExport (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:9609:28)
    at Module.traceVariable (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:10082:24)
    at ModuleScope.findVariable (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:8631:39)
    at Identifier$1.bind (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:4119:40)
    at Property$1.bind (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:2847:23)
    at Property$1.bind (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:8245:15)
    at ObjectExpression.bind (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:2843:31)
    at ObjectExpression.bind (/Users/regisfrey/Dev/vite-svg-error/node_modules/rollup/dist/shared/rollup.js:7936:15) {
  code: 'MISSING_EXPORT',
  url: 'https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module',
  id: '/Users/regisfrey/Dev/vite-svg-error/src/components/HelloWorld.vue?vue&type=script&lang.js',
  pos: 10,
  loc: {
    file: '/Users/regisfrey/Dev/vite-svg-error/src/components/HelloWorld.vue?vue&type=script&lang.js',
    line: 2,
    column: 9
  },
  frame: '1: \n' +
    "2: import { VueComponent as ExampleSvg } from '../assets/example.svg';\n" +
    '            ^\n' +
    '3: \n' +
    '4: export default {',
  watchFiles: [
    '/Users/regisfrey/Dev/vite-svg-error/index.html',
    '/Users/regisfrey/Dev/vite-svg-error/src/main.js',
    '/Users/regisfrey/Dev/vite-svg-error/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
    '/Users/regisfrey/Dev/vite-svg-error/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
    '/Users/regisfrey/Dev/vite-svg-error/node_modules/@vue/shared/dist/shared.esm-bundler.js',
    '/Users/regisfrey/Dev/vite-svg-error/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js',
    '/Users/regisfrey/Dev/vite-svg-error/src/App.vue',
    '/Users/regisfrey/Dev/vite-svg-error/src/index.css',
    '/Users/regisfrey/Dev/vite-svg-error/src/App.vue?vue&type=script&lang.js',
    '/Users/regisfrey/Dev/vite-svg-error/src/App.vue?vue&type=template&id=7ba5bd90',
    '/Users/regisfrey/Dev/vite-svg-error/src/components/HelloWorld.vue',
    '/Users/regisfrey/Dev/vite-svg-error/src/components/HelloWorld.vue?vue&type=script&lang.js',
    '/Users/regisfrey/Dev/vite-svg-error/src/components/HelloWorld.vue?vue&type=template&id=469af010',
    '/Users/regisfrey/Dev/vite-svg-error/src/assets/example.svg'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[RegisFrey]

Attempted Fixes:

• Adding vite aliases as implied by this closed issue: #2 Could not resolve SVG in Production Build
• Switching to Typescript + Adding a d.ts file as implied in this closed issue: #6 Cannot resolve symbol 'VueComponent' ... but had enough issues around the alias that I gave up this path for now
• Upgrading to latest Vue + Vite (v1.0.0-rc.1 -> v1.0.0-rc.4)
• Downgrading to older "supported" Vue + Vite version called out in README (1.0.0-beta.12)
  • vue and @vue/compiler-sfc need to be at "@vue/compiler-sfc@^3.0.0-beta.15" to match peer dependency in "vite-plugin-svg@0.6.0"

Fix: Downgrading to Vite 1.0.0-beta.12 (or rc.3)

Downgrading does seem to work (you can complete a production build and the SVG appears on serving that built app). So must have been a change to Vite between beta.12 and rc.1.

UPDATE: I got tripped up by npm version specifiers. Looks like I can production build right up until vite 1.0.0-rc.4. So issue must be between rc.3 and rc.4.

It would be good to update this to work against the latest release candidate (rc.4). I'll keep looking for the issue now that I narrowed it down but I'm not very familiar with vite yet.

[damianstasik]

@RegisFrey I just released vite-plugin-svg@0.7.0 and the issue should be gone, I also tested it on your reproduction repo (thanks for it by the way!) and it works. Thank you for reporting the issue, I was totally unaware of it even though I monitor closely the commits inside the Vite repo 😞 As it turns out process.env.NODE_ENV is no longer set to production when vite build is run, fortunately sometime ago API for transforms was slightly changed and isBuild is provided to both test and transform. Let me know if the issue is also gone on your side.

[RegisFrey]

Yes, looks like it builds with rc 4 and the updated vite-plugin-svg@0.7.0. Thank you.

[ramoneg]

Referencing it as a js property worked for me:
<img :src="'/images/cart.svg'">

[wsz7777]

I have a case

[wsz7777]

how to override this declare definition ?