Does @vitejs/plugin-vue support rollup?

[sxzz]

Motivation

Since rollup-plugin-vue have not been updated for a long time, there are some bugs and some missing features (e.g refTransform).
So I wonder if Vue team already give up rollup-plugin-vue? If so, then could @vitejs/plugin-vue be a good substitute?

Problems

I tried using @vitejs/plugin-vue in rollup, but there seems to be a problem. When the preserveModules is true in rollup, the EXPORT_HELPER_ID has no suffix name .js, which causes an import error.
IMHO, EXPORT_HELPER_ID in packages/plugin-vue/src/helper.ts should be plugin-vue:export-helper.js

--- export const EXPORT_HELPER_ID = 'plugin-vue:export-helper'
+++ export const EXPORT_HELPER_ID = 'plugin-vue:export-helper.js'

UPDATE: This problem is fixed in latest rollup + vite, but it cause another problem

TypeError: Cannot read properties of null (reading 'parse')
    at createDescriptor (xxx/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.js:4120:43)

vite/packages/plugin-vue/src/index.ts

Lines 133 to 141 in 7b95f4d

	configResolved(config) {
	options = {
	...options,
	root: config.root,
	sourceMap: config.command === 'build' ? !!config.build.sourcemap : true,
	isProduction: config.isProduction,
	compiler: options.compiler || resolveCompiler(config.root)
	}
	},

configResolved doesn't exist in rollup, so compiler = null #6566

I'm not sure if there are other problems, but @vitejs/plugin-vue doesn't seem to consider compatibility with rollup.

Plan

I have a plan, FYI.
Considering that Vite may remove rollup, and use esbuild only in the future.

ATM, we can move the rollup part in rollup-plugin-vue (e.g SFC, refTransform). @vitejs/plugin-vue extends from rollup-plugin-vue, and then provides hot update and other features only vite has.

[sxzz]

/cc @patak-js @underfin @yyx990803

[sxzz]

rollup-plugin-vue has been archived, but Vite doesn't meet our requirements.
For example, enabling preserveModules is very troublesome in Vite. Consider how to transform the Vue SFC in a component library (Vite's library mode is too simple).

https://github.com/element-plus/element-plus/blob/dev/build/modules.ts

/cc @yyx990803

[sxzz]

FYI, I made a universal Vue SFC plugin for Rollup, ESBuild and Webpack.

https://github.com/sxzz/unplugin-vue

[keiouks]

I get trouble with this unplugin-vue and @vitejs/plugin-vue using in rollup.
I'm using gulp.

this is the task, I try the .vue and the ts file for the input file:

when I run this task , I got this error "ReferenceError: __name is not defined"

 
these are the component file
 

this is the .vue file

 the test-com.ts file

and the index.ts file

 

[bowencool]

Any news?

[sxzz]

Already supported.

[KaygNas]

I have trouble building sfc, rollup throw error as below:

It looks like some config is needed, do you known whether there is any way to solve it?

[sxzz]

https://github.com/element-plus/element-plus/blob/74a8d8ba32a84fe97b109de3cbb264b95c8ef21d/internal/build/src/tasks/full-bundle.ts#L32

No configuration seems to be needed.

[KaygNas]

Thanks for your help.

I found differences between our cases, in my case I have css written in the .vue file, but in yours, css had been extracted into style dir, that's why I have error thrown and yours not.

Here's my solution:
simply install another rollup plugin to help as the error message say, so I install rollup-plugin-styles to handle it.

// rollup.config.js
import vue3 from '@vitejs/plugin-vue'
import styles from 'rollup-plugin-styles'

export default {
  plugins: [
      vue3(),
     // Injecting css
      styles({ mode: 'inject' }),
  ]
}

Injecting css is default behaviour using rollup-plugin-vue@^5.0.0 for vue2 but not when using @vitejs/plugin-vue for vue3, that's why I need another plugin to take the job.

It took time for newbee like me to figure out the solution and wish it would help others.