TypeError: Preview is not a function

[Loongphy]

Project created by pnpm create vite my-vue-app --template vue-ts

"dependencies": {
  "vue": "^3.2.45"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^4.0.0",
  "typescript": "^4.9.3",
  "vite": "^4.1.0",
  "vite-plugin-vue-component-preview": "^1.0.2",
  "vue-tsc": "^1.0.24"
}

In vite.config.ts, Preview() got error TypeError: Preview is not a function, using Preview.default() works fine but got typescript error Property 'default' does not exist on type '() => Plugin_2'.

[Take-Me1010]

I got the same error in the project geneareted by yarn, in windows 10.

Reproduction:

1. create a new project by yarn create vite and select Vue.js and TypeScript.
2. add the plugin via yarn add -D vite-plugin-vue-component-preview, its version is 1.0.2
3. setup based on the README.md

Then I see the terminal named volar-preview:3333

node "c:\\Users\\takeMe\\.vscode\\extensions\\vue.volar-1.0.24-win32-x64\\dist\\preview-bin\\vite.js" --port=3333
failed to load config from C:\Users\\takeMe\programing\vscodeExtension\vite-preview-test\node_modules\.volar\vite.config.ts
error when starting dev server:
TypeError: Preview is not a function
    ...

Actually the impoted plugin is { default: [Function: default_1] } which can be seen as follows:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import preview from "vite-plugin-vue-component-preview"
console.debug(preview)
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), preview()],
})

By replacing preview() with preview.default(), the error disappear (but VSCode warns Property 'default' does not exist on type '() => Plugin_2'.).
However I can't get the expected result with the below error messages:

Sourcemap for "C:/path_to/vite-preview-test/node_modules/vite/dist/client/client.mjs" points to missing source files
Sourcemap for "C:/path_to/vite-preview-test/node_modules/vite/dist/client/env.mjs" points to missing source files
Failed to load url assets/style/common.css (resolved id: assets/style/common.css). Does the file exist?
Failed to load url assets/style/form.css (resolved id: assets/style/form.css). Does the file exist?

[johnsoncodehk]

I can't reproduce this problem with a new project create via pnpm create vite my-vue-app --template vue-ts, can you provide minimal reproduction?

[Loongphy]

I can't reproduce this problem with a new project create via pnpm create vite my-vue-app --template vue-ts, can you provide minimal reproduction?

https://github.com/Loongphy/my-vue-app

[johnsoncodehk]

@Take-Me1010 @Loongphy Thanks for the information, I have no idea for now, but the problem may come from:

• https://github.com/johnsoncodehk/vue-preview/blob/master/packages/core/bin/vite/config.ts
• https://github.com/johnsoncodehk/vite-plugin-vue-component-preview/blob/master/index.ts

[Take-Me1010]

About the TypeError problem, How about changing configures like below?

1. add "type": "module", in package.json

{
 	"type": "module",
}

2. change target and module in tsconfig.json, like https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/tsconfig.json

{
	"compilerOptions": {
		"target": "ES2020",
		"module": "ES2020",
        },
}

The js files generated by pnpm tsc seem to work well in my environment.
Maybe it is better to use some transpiler like babel. But it is not exactly sure because I am not used to developing npm packages :(

[zssng]

import Preview from 'vite-plugin-vue-component-preview'

const PreviewFunc=(Preview as any).default

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

works for me

[johnsoncodehk]

Please try v1.1.0

[johnsoncodehk]

Re-opened as the relevant changes have been reverted as it broke Vue and Nuxt Preview, maybe have to build .mjs + .cjs together.

[Take-Me1010]

vitejs/vite#8178
the idea of CJS Proxy, which is used in vite, seems one of the best solutions.

[salomaosnff]

@johnsoncodehk I found this, maybe it will help you
https://github.com/vitejs/vite-plugin-vue/blob/main/scripts/patchCJS.ts