打包后，父组件隐式传递prop，子组件无法正常获取

[ShaneLee-9]

Version

5.0.0-beta.6

Reproduction link

github.com

Environment info

  System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.423.0), Chromium (95.0.1020.40)
  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.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-beta.6
    @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:  5.0.0-beta.6
    @vue/cli-plugin-babel: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-eslint: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-router: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-typescript: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-plugin-vuex: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-service: ~5.0.0-beta.6 => 5.0.0-beta.6
    @vue/cli-shared-utils:  5.0.0-beta.6
    @vue/compiler-core:  3.2.21
    @vue/compiler-dom:  3.2.21
    @vue/compiler-sfc: ^3.2.21 => 3.2.21
    @vue/compiler-ssr:  3.2.21
    @vue/component-compiler-utils:  3.2.2
    @vue/devtools-api:  6.0.0-beta.19
    @vue/eslint-config-standard: ^6.1.0 => 6.1.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/reactivity:  3.2.21
    @vue/ref-transform:  3.2.21
    @vue/runtime-core:  3.2.21
    @vue/runtime-dom:  3.2.21
    @vue/server-renderer:  3.2.21
    @vue/shared:  3.2.21
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.2.0 => 7.20.0
    typescript: ~4.1.5 => 4.1.6
    vue: ^3.2.21 => 3.2.21
    vue-cli-plugin-quasar: ^4.0.3 => 4.0.3
    vue-demi:  undefined (0.12.0)
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.8.1 (15.9.8)
    vue-router: ^4.0.3 => 4.0.12
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. npm install
2. npm run build
3. 用一个本地服务器打开dist文件夹下的index.html

What is expected?

页面渲染的文本应该是msg: msg true

What is actually happening?

msg: msg false

---

当我的子组件接收一个类型为Boolean的msg props的时候，我在父组件传入msg，正常情况下，子组件获取到msg的值应该是true。这在开发环境下是正确的。当我打包后msg的值是一个空字符串。
在提出这个问题之前，我尝试使用vue-cli创建了一个没有集成typescript的项目，它的表现是正常的。

[ShaneLee-9]

刚刚测试，如果使用以下写法，打包后也是正常的：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    msg: {
      type: Boolean,
      required: true
    }
  }
})
</script>

<template>
  <h4>msg: {{ msg ? 'msg true' : 'msg false' }}</h4>
</template>

综合各种情况，目前发现只有用 script setip 语法糖配合 typescript 会出现问题

[bodograumann]

I'm seeing the same issue.
Same context (I think): <script setup lang="ts"> and boolean prop set to true. Correctly works in dev mode, but not in production build.
It worked with [email protected] and fails in [email protected].

[haoqunjiang]

I can reproduce this issue with Vite too. So I'm transferring it to the vue-next repository.

[posva]

It seems to work fine in the SFC playground

[haoqunjiang]

The issue here is that in production mode, defineProps<{ msg: boolean }> is compiled to props: { msg: null }

[haoqunjiang]

Oh the fix has just been merged:
#4790

[bodograumann]

Will there be a new release soon, or do I have to downgrade? (and to which version?)

[ShaneLee-9]

很快会有新版本发布，还是必须降级？（以及哪个版本？）

Currently it is possible to explicitly pass a boolean value to prop. e.g:

<Children
  :selectable="true"
/>

[bodograumann]

Not sure I want to incurr this debt. For posterity, this is how one could find the problematic props:

rg --multiline --glob "*.vue" "<[A-Z][^ \n>]*(\s+[a-z-:@]+=\"[^\"]*\")*\s+[a-z-]+\s*[ \n>]"

[languanghao]

很快会有新版本发布，还是必须降级？（以及哪个版本？）

Currently it is possible to explicitly pass a boolean value to prop. e.g:

<Children
  :selectable="true"
/>

3.2.19可以