web-infra-dev / rsbuild

The Rspack-based build tool. It's fast, out-of-the-box and extensible.
https://rsbuild.dev/
MIT License
1.46k stars 116 forks source link

[Bug]: Fail to build because of defineProps<IProps>() #3476

Closed huangtiandi1999 closed 3 days ago

huangtiandi1999 commented 4 days ago

Version

System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 513.10 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Browsers:
    Chrome: 128.0.6613.138
    Edge: 128.0.2739.79
    Safari: 15.6.1
  npmPackages:
    @rsbuild/core: ^1.0.1 => 1.0.2 
    @rsbuild/plugin-vue2: ^1.0.1 => 1.0.1

Details

fail to build

<script setup lang="ts">
import type { IProps } from './interface.ts';

defineProps<IProps>();
</script>

<template>
  <div>test: {{ msg }}</div>
</template>

success to build

<script setup lang="ts">
interface IProps {
  msg: string;
}

defineProps<IProps>();
</script>

<template>
  <div>test: {{ msg }}</div>
</template>

rsbuild.config.ts

import { defineConfig } from '@rsbuild/core';
import { pluginVue2 } from '@rsbuild/plugin-vue2';

export default defineConfig({
  plugins: [pluginVue2()],
});

package.json

{
  "name": "rsbuild_vue2",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "rsbuild dev --open",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  },
  "dependencies": {
    "vue": "^2.7.16"
  },
  "devDependencies": {
    "@rsbuild/core": "^1.0.1",
    "@rsbuild/plugin-vue2": "^1.0.1",
    "typescript": "^5.5.2"
  }
}

Reproduce link

none

Reproduce Steps

none

chenjiahan commented 4 days ago

Do you mean this error?

image

This is a tip from the Vue compiler and has nothing to do with Rsbuild.

chenjiahan commented 4 days ago

In version 3.2 and below, the generic type parameter for defineProps() were limited to a type literal or a reference to a local interface.

https://vuejs.org/guide/typescript/composition-api#syntax-limitations

huangtiandi1999 commented 3 days ago

In version 3.2 and below, the generic type parameter for defineProps() were limited to a type literal or a reference to a local interface.

https://vuejs.org/guide/typescript/composition-api#syntax-limitations

Thanks for your reply. Now I use Vue Marco library to support that imported from an external source, However, it should be noted that the @vue-macros/better-define version needs to be lower than v1.7.1, which may help guys with the same problem

 import { defineConfig } from '@rsbuild/core';
import { pluginVue2 } from '@rsbuild/plugin-vue2';
import betterDefine from '@vue-macros/better-define/webpack';

export default defineConfig({
  plugins: [pluginVue2()],
  tools: {
    rspack: (config) => {
      config.plugins?.push(betterDefine());
      return config;
    },
  },
});