error TS2305: Module 'vue' has no exported member 'mergeDefaults'

[zhong1998]

Troubleshooting

1. Does tsc have the same output? If so, please explain why this is incorrect behavior

2. Does your Rollup plugin order match this plugin's compatibility? If not, please elaborate

3. Can you create a minimal example that reproduces this behavior? Preferably, use this environment for your reproduction

What happens and why it is incorrect

I use export default definecomponent can be ok but use setup lang="ts" is false. it seems the plugin is wrong in run time.

Environment

<template>
  <img :src="src" class="component" :style="styleProps" @click.prevent="handleClick">
</template>

<script lang="ts" setup>
import {defineProps, withDefaults} from "vue"
import useComponentCommon from "./../../hook/useComponentCommon"
import {imageDefaultProps, imageStylePropsNames} from "../../defaultProps"

interface imgProps {
  src: string;
  actionType: string;
  url: string;
  // size
  height: string;
  width: string;
  paddingLeft: string;
  paddingRight: string;
  paddingTop: string;
  paddingBottom: string;
  // border type
  borderStyle: string;
  borderColor: string;
  borderWidth: string;
  borderRadius: string;
  // shadow and opacity
  boxShadow: string;
  opacity: string;
  // position and x,y
  position: string;
  left: string;
  top: string;
  right: string;
}

const props = withDefaults(defineProps<imgProps>(), {
  ...imageDefaultProps
})
const {styleProps, handleClick} = useComponentCommon(props, imageStylePropsNames)
</script>

<style scoped>
.component {
  max-width: 100%;
  position: relative !important;
}
</style>

Versions

"rollup-plugin-typescript2": "^0.34.1",

rollup.config.js

:

import fs from "fs"
import vue from "rollup-plugin-vue"
import css from "rollup-plugin-css-only"
import typescript from "rollup-plugin-typescript2";

const {name} = JSON.parse(fs.readFileSync("package.json", "utf-8"))
const file = type => `dist/${name}.${type}.js`

const overrides = {
    compilerOptions: {declaration: true},
}
export default {
    input: "src/index.ts",
    output: {
        name,
        file: file("esm"),
        format: 'es'
    },
    plugins: [
        typescript({tsconfigOverride:overrides}),
        vue(),
        css({output: "bundle.css"})
    ]
}

tsconfig.json

:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json

:

{
  "name": "xxxx",
  "version": "xxxx",
  "private": true,
  "type": "module",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "build:esm": "rollup --config build/rollup.config.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "lodash-es": "^4.17.21",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@types/lodash-es": "^4.17.6",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-typescript2": "^0.34.1",
    "rollup-plugin-vue": "^6.0.0",
    "ts-jest": "^27.0.4",
    "tslib": "^1.14.1",
    "typescript": "~4.5.5"
  }
}

plugin output with verbosity 3

:

[agilgur5]

So there was no repro provided here and no logs either, but this issue sounds very similar to #325 with the case of Vue SFCs (also potentially #235 / vuejs/rollup-plugin-vue#311). Per #325, that is due to a problem in Vue typings or rollup-plugin-vue (which has long been unmaintained), and so it is out of the control and scope of rpt2 (similarly, #235 is due to a bug in rollup-plugin-vue vuejs/rollup-plugin-vue#311)

That being said, there is a workaround provided in #325 that may work for your issue as well

[wwei-github]

Has this problem been solved? I have also encountered this, but I don't know why

[veco9]

I'm experiencing the same issue. The problem arises due to the destructuring that occurs in the "defaults" parameter of the "withDefaults" function.

{
  ...imageDefaultProps
}

Even if you pass it like this:

{
   ...{someProperty: "foo"}
}

or

{
   Object.assign({}, {someProperty: "foo"})
}

I have also left a comment on the issue vite-plugin-dts#188.
I would greatly appreciate any assistance or possible workarounds.

[agilgur5]

Per qmhc/vite-plugin-dts#188 (comment), it looks like this indeed was a Vue typings issue:

I've found a comment in [email protected] "runtime-core.d.ts":
/* removed internal: mergeDefaults */