`error: TS2742` when packaging a Vue3 UI component library using `pnpm`

[jiefei666]

I relied on the types of Vue and ant design Vue, which caused me to report an error when packaging the type，May I ask how to solve it

[agilgur5]

Please don't remove the issue template, it's there for a reason. This issue has little to no details, which makes it impossible to triage, let alone debug (if it is even a bug).

Please note that text is strongly preferred over screenshots when reporting GitHub issues (or StackOverflow questions, per the link), as text can be copied, searched, etc and is significantly more accessible, while screenshots cannot be / are not nearly as accessible.

As you used a screenshot, I did have to manually transpose the text of the error here:

[!] (plugin rpt2) RollupError: src/button/index.ts:6:1 - error TS2742: The inferred type of 'default' cannot be  named without a reference to '.pnpm/registry.npmmirror.com+vue-types@3.0.2_vue@3.3.4/node_modules/vue-types'. This likely is not portable. A type annotation is necessary.

6 export default withInstall(Button)

As the issue template was removed, there are no details to go from. From a glance, that is a TS type error, not an error in rpt2.

It looks like this specific error has lots of search results. https://github.com/microsoft/TypeScript/issues/47663 is one with lots of related/duplicate issues. This SO question has several workarounds as well. Given the lack of details, it's impossible to tell which of those might work for you and what the root cause may or may not be. Some of those comments do mention pnpm and symlink issues, and it looks like you are using pnpm here, so that may be related.

Closing until more details are provided

[solleoIT]

As I had the same issue and searched the web a lot I came across several posts regarding this topic. This one seems to be the closest one to my kinda similar issue, so I'm posting my finding in this one.

Who ever comes across this post on searching for TS2742 typescript error, when bundling/packaging a vue3 component library and receives the error message like I did:

error TS2742: The inferred type of '_sfc_main' cannot be named without a reference to '.pnpm/@intlify+core-base@9.13.1/node_modules/@intlify/core-base'. This is likely not portable. A type annotation is necessary.

I had some components working without error and on some the packing process stopped with the error message above. On deeper investigation with checking what's different between components with and without error and removing certain parts of the component, I was able to narrow it down to the following point:

Let's say I'm having a very minimal component called ExampleButton with vue file like this:

<template>
  <div class="test-component">
    <button>{{ t('buttonLabel') }}</button>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'ExampleButton' });

import './ExampleButton.scss';
import { useI18n } from 'vue-i18n';

const { t } = useI18n({ useScope: 'local' });
</script>

<i18n lang="json" src="./ExampleButton.i18n.json"></i18n>

The issue for me seemed to be with useI18n. When I removed the usage completely I had no error message for this component anymore. I further played around a little and when changing

- const { t } = useI18n({ useScope: 'local' });
+ const i18n = useI18n({ useScope: 'local' });

and instead

- <button @click="submit">{{ t('buttonLabel') }}</button>
+ <button @click="submit">{{ u18n.t('buttonLabel') }}</button>

it seems to work.

(I'm on Node v20.14.0, using PNPM 9.1.1)

Addition: Error also occurs, when just using useI18n() without defining the useScope option with local/global