vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

Build does not resolve computed properties in :src="require()" but serve does #6733

Open panwauu opened 2 years ago

panwauu commented 2 years ago

Version

4.5.13

Reproduction link

github.com

Environment info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) ia32 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz
  Binaries:
    Node: 14.16.1 - C:\Program Files (x86)\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.12 - C:\Program Files (x86)\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.0
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ~4.5.0 => 4.5.13
    @vue/cli-shared-utils:  4.5.13
    @vue/compiler-core:  3.2.19
    @vue/compiler-dom:  3.2.19
    @vue/compiler-sfc: ^3.0.0 => 3.2.19
    @vue/compiler-ssr:  3.2.19
    @vue/component-compiler-utils:  3.2.2
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.2.19
    @vue/runtime-core:  3.2.19
    @vue/runtime-dom:  3.2.19
    @vue/server-renderer:  3.2.19
    @vue/shared:  3.2.19
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0.0 => 7.19.1
    typescript: ~4.1.5 => 4.1.6
    vue: ^3.0.0 => 3.2.19
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8 (16.8.1)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Clone Repository

Run serve

Run build + Serve dist folder (I used vscode liveServer)

What is expected?

<template>
    <img alt="Vue logo" :src="require('../assets/logo.png')" />

    <!-- This works with serve and with build -->
    <img alt="Vue logo" :src="require('../assets/' + imageSrc)" />

    <!-- This works with serve not with build -> ReferenceError: _unref is not defined -->
    <img alt="Vue logo" :src="require(`../assets/${imageSrc}`)" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
const imageSrc = computed(() => { return 'logo.png' })
</script>

This component should display the vue logo 3 times independent of development/production build.

What is actually happening?

The third image leads to an error in production build:

ReferenceError: _unref is not defined

If you comment out the last image tag both serve and build are working fine and display two images.

LeslieZhang commented 2 years ago

I have a similar problem, how can I solve it?