Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Need Help] got declare const _default: any; export default _default; when build vue files #277

Closed
3 tasks done
Shana-AE opened this issue Oct 16, 2023 · 4 comments
Closed
3 tasks done
Labels
enhancement New feature or request

Comments

@Shana-AE
Copy link

Shana-AE commented Oct 16, 2023

Describe the bug

env:
@vitejs/plugin-vue2: ^2.2.0 => 2.2.0
@vitejs/plugin-vue2-jsx: ^1.1.0 => 1.1.0
vite: ^4.4.9 => 4.4.9
vite-plugin-dts: ^3.6.0 => 3.6.0
vue: 2.7.14
unplugin-vue-macros: ^2.5.1

在尝试使用此插件构建vue组件时,发现导出的d.ts如下,丢失类型信息。
I got invalid d.ts like below when try to build vue components with vite-plugin-dts

declare const _default: any;
export default _default;

后续使用debug工具打断点,发现在此处service.getEmitOutput()的返回值已经不对
同时未进入时sourceFile.text值如下,具有类型信息
After I use break points, I found the output of the function call service.getEmitOutput() has already become invalid here
Also I checked the value of sourceFile.text(listed below) and I found it has types info.

"/* target: 2.7, plugins: [null,null,null,null,null,null,null], extensions: [\".vue\"], lib: \"vue\", jsxSlots: false, strictTemplates: false, skipTemplateCodegen: false, nativeTags: [\"html\",\"body\",\"base\",\"head\",\"link\",\"meta\",\"style\",\"title\",\"address\",\"article\",\"aside\",\"footer\",\"header\",\"hgroup\",\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"nav\",\"section\",\"div\",\"dd\",\"dl\",\"dt\",\"figcaption\",\"figure\",\"picture\",\"hr\",\"img\",\"li\",\"main\",\"ol\",\"p\",\"pre\",\"ul\",\"a\",\"b\",\"abbr\",\"bdi\",\"bdo\",\"br\",\"cite\",\"code\",\"data\",\"dfn\",\"em\",\"i\",\"kbd\",\"mark\",\"q\",\"rp\",\"rt\",\"ruby\",\"s\",\"samp\",\"small\",\"span\",\"strong\",\"sub\",\"sup\",\"time\",\"u\",\"var\",\"wbr\",\"area\",\"audio\",\"map\",\"track\",\"video\",\"embed\",\"object\",\"param\",\"source\",\"canvas\",\"script\",\"noscript\",\"del\",\"ins\",\"caption\",\"col\",\"colgroup\",\"table\",\"thead\",\"tbody\",\"td\",\"th\",\"tr\",\"button\",\"datalist\",\"fieldset\",\"form\",\"input\",\"label\",\"legend\",\"meter\",\"optgroup\",\"option\",\"output\",\"progress\",\"select\",\"textarea\",\"details\",\"dialog\",\"menu\",\"summary\",\"template\",\"blockquote\",\"iframe\",\"tfoot\",\"svg\",\"animate\",\"animateMotion\",\"animateTransform\",\"circle\",\"clipPath\",\"color-profile\",\"defs\",\"desc\",\"discard\",\"ellipse\",\"feBlend\",\"feColorMatrix\",\"feComponentTransfer\",\"feComposite\",\"feConvolveMatrix\",\"feDiffuseLighting\",\"feDisplacementMap\",\"feDistanceLight\",\"feDropShadow\",\"feFlood\",\"feFuncA\",\"feFuncB\",\"feFuncG\",\"feFuncR\",\"feGaussianBlur\",\"feImage\",\"feMerge\",\"feMergeNode\",\"feMorphology\",\"feOffset\",\"fePointLight\",\"feSpecularLighting\",\"feSpotLight\",\"feTile\",\"feTurbulence\",\"filter\",\"foreignObject\",\"g\",\"hatch\",\"hatchpath\",\"image\",\"line\",\"linearGradient\",\"marker\",\"mask\",\"mesh\",\"meshgradient\",\"meshpatch\",\"meshrow\",\"metadata\",\"mpath\",\"path\",\"pattern\",\"polygon\",\"polyline\",\"radialGradient\",\"rect\",\"set\",\"solidcolor\",\"stop\",\"switch\",\"symbol\",\"text\",\"textPath\",\"tspan\",\"unknown\",\"use\",\"view\",\"slot\",\"component\"], dataAttributes: [], htmlAttributes: [\"aria-*\"], optionsWrapper: [\"(await import('vue')).defineComponent(\",\")\"], macros: {\"defineProps\":[\"defineProps\",\"$defineProps\",\"definePropsRefs\"],\"defineSlots\":[\"defineSlots\"],\"defineEmits\":[\"defineEmits\"],\"defineExpose\":[\"defineExpose\"],\"defineModel\":[\"defineModel\"],\"defineOptions\":[\"defineOptions\"],\"withDefaults\":[\"withDefaults\"]}, hooks: [], experimentalDefinePropProposal: false, experimentalAdditionalLanguageModules: [], experimentalResolveStyleCssClasses: \"scoped\", experimentalModelPropName: {\"\":{\"input\":true},\"value\":{\"input\":{\"type\":\"text\"},\"textarea\":true,\"select\":true}}, experimentalUseElementAccessInTemplate: false */\n\n\nwithDefaults(defineProps<{\n  selected: boolean;\n  size?: string;\n  checkSize?: string;\n  theme?: 'light' | 'dark';\n}>(), {\n  size: '24px',\n  checkSize: '16px',\n  theme: 'dark',\n});\nconst __VLS_withDefaultsArg = (function <T>(t: T) { return t })({\n  size: '24px',\n  checkSize: '16px',\n  theme: 'dark',\n});\nconst __VLS_publicComponent = (await import('vue')).defineComponent({\nprops: {\n...{} as __VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{\n  selected: boolean;\n  size?: string;\n  checkSize?: string;\n  theme?: 'light' | 'dark';\n}>, typeof __VLS_withDefaultsArg>,\n},\nsetup() {\nreturn {\n};\n},\n});\n\nconst __VLS_componentsOption = {};\n\nlet __VLS_name!: 'CheckIndicator';\nfunction __VLS_template() {\nlet __VLS_ctx!: InstanceType<__VLS_PickNotAny<typeof __VLS_publicComponent, new () => {}>> & InstanceType<__VLS_PickNotAny<typeof __VLS_internalComponent, new () => {}>> & {\n};\n/* Components */\nlet __VLS_otherComponents!: NonNullable<typeof __VLS_internalComponent extends { components: infer C } ? C : {}> & typeof __VLS_componentsOption;\nlet __VLS_own!: __VLS_SelfComponent<typeof __VLS_name, typeof __VLS_internalComponent & typeof __VLS_publicComponent & (new () => { $scopedSlots: typeof __VLS_slots })>;\nlet __VLS_localComponents!: typeof __VLS_otherComponents & Omit<typeof __VLS_own, keyof typeof __VLS_otherComponents>;\nlet __VLS_components!: typeof __VLS_localComponents & __VLS_GlobalComponents & typeof __VLS_ctx;\n/* Style Scoped */\ntype __VLS_StyleScopedClasses = {};\nlet __VLS_styleScopedClasses!: __VLS_StyleScopedClasses | keyof __VLS_StyleScopedClasses | (keyof __VLS_StyleScopedClasses)[];\n/* CSS variable injection */\n/* CSS variable injection end */\nlet __VLS_resolvedLocalAndGlobalComponents!: {}\n;\n({} as __VLS_IntrinsicElements).div;({} as __VLS_IntrinsicElements).div;\n({} as __VLS_IntrinsicElements).i;\n{\nconst __VLS_0 = ({} as __VLS_IntrinsicElements)[\"div\"];\nconst __VLS_1 = __VLS_elementAsFunctionalComponent(__VLS_0);\n({} as __VLS_IntrinsicElements).div;\n({} as __VLS_IntrinsicElements).div;\nconst __VLS_2 = __VLS_1({ ...{ }, style: (({\n      '--size': __VLS_ctx.size,\n      '--check-size': __VLS_ctx.checkSize,\n    })), class: (\"w-[var(--size)] h-[var(--size)] border border-solid rounded-full transition-all duration-300 flex items-center justify-center\"), }, ...__VLS_functionalComponentArgsRest(__VLS_1));\n({} as (props: __VLS_FunctionalComponentProps<typeof __VLS_0, typeof __VLS_2> & Record<string, unknown>) => void)({ ...{ }, style: (({\n      '--size': __VLS_ctx.size,\n      '--check-size': __VLS_ctx.checkSize,\n    })), class: (\"w-[var(--size)] h-[var(--size)] border border-solid rounded-full transition-all duration-300 flex items-center justify-center\"), });\nconst __VLS_3 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2)!;\n([\n      __VLS_ctx.selected ? 'bg-primary-80' : {\n        light: 'bg-fill-70',\n        dark: 'bg-trans-20',\n      }[__VLS_ctx.theme],\n      {\n        light: __VLS_ctx.selected ? 'border-primary-80' : 'border-text-50',\n        dark: 'border-text-40',\n      }[__VLS_ctx.theme],\n    ]);\n{\nconst __VLS_4 = ({} as __VLS_IntrinsicElements)[\"i\"];\nconst __VLS_5 = __VLS_elementAsFunctionalComponent(__VLS_4);\n({} as __VLS_IntrinsicElements).i;\nconst __VLS_6 = __VLS_5({ ...{ }, class: ((__VLS_ctx.selected ? 'opacity-100' : 'opacity-0')), }, ...__VLS_functionalComponentArgsRest(__VLS_5));\n({} as (props: __VLS_FunctionalComponentProps<typeof __VLS_4, typeof __VLS_6> & Record<string, unknown>) => void)({ ...{ }, class: ((__VLS_ctx.selected ? 'opacity-100' : 'opacity-0')), });\nconst __VLS_7 = __VLS_pickFunctionalComponentCtx(__VLS_4, __VLS_6)!;\n}\n(__VLS_3.slots!).default;\n}\nif (typeof __VLS_styleScopedClasses === 'object' && !Array.isArray(__VLS_styleScopedClasses)) {\n}\nvar __VLS_slots!:{\n};\n// @ts-ignore\n[size,checkSize,size,checkSize,selected,theme,selected,theme,selected,selected,];\nreturn __VLS_slots;\n}\nconst __VLS_internalComponent = (await import('vue')).defineComponent({\nsetup() {\nreturn {\n};\n},\n});\nexport default {} as typeof __VLS_publicComponent;\n\ntype __VLS_NonUndefinedable<T> = T extends undefined ? never : T;\ntype __VLS_TypePropsToRuntimeProps<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? { type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>> } : { type: import('vue').PropType<T[K]>, required: true } };\ntype __VLS_WithDefaults<P, D> = {\n\t\t\t\t\t// use 'keyof Pick<P, keyof P>' instead of 'keyof P' to keep props jsdoc\n\t\t\t\t\t[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {\n\t\t\t\t\t\tdefault: D[K]\n\t\t\t\t\t}> : P[K]\n\t\t\t\t};\ntype __VLS_Prettify<T> = { [K in keyof T]: T[K]; } & {};\n"

vue-tsc命令行可以得到类型信息
the d.ts can be exported properly by vue-tsc cli
目前猜测是tsconfig配置不正确,希望能够提供帮助, 谢谢
I guess this is caused by wrong tsconfig, but I don't know how to solve it, I need your help

Reproduction

https://stackblitz.com/edit/vitejs-vite-f5wcx4

Steps to reproduce

cd internal/build
pnpm build

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 64.11 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.3.0 - ~/Library/pnpm/pnpm
  Browsers:
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-vue2: ^2.2.0 => 2.2.0 
    @vitejs/plugin-vue2-jsx: ^1.1.0 => 1.1.0 
    vite: ^4.4.9 => 4.4.9 
    vite-plugin-dts: ^3.6.0 => 3.6.0

Validations

@qmhc qmhc added the enhancement New feature or request label Oct 20, 2023
@qmhc
Copy link
Owner

qmhc commented Oct 20, 2023

初步推测是插件给 Volar 传递配置时缺少了某些内容,导致 Volar 无法获取到正确的 Vue 版本。

@qmhc qmhc added bug Something isn't working and removed enhancement New feature or request labels Oct 20, 2023
@qmhc qmhc added enhancement New feature or request and removed bug Something isn't working labels Oct 24, 2023
@qmhc
Copy link
Owner

qmhc commented Oct 24, 2023

经排查,发现是由于顶层的 tsconfig.json 中未包含 moduleResolution 选项导致的,当前自行添加 moduleResolution 选项可解决。

下个 patch 版本会增加 moduleResolution 的默认值。

@qmhc qmhc closed this as completed in 01528a4 Oct 24, 2023
@IAMSBLOL
Copy link

目前最新的配置这个问题又出现了

@that-hossein
Copy link

This issue fixed by adding "moduleResolution": "Node10" in tsconfig.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants