how to compile vue template in vuejs3 - vuejs3

Question

I want to develop a vue3 application and use rollup as the bundler. I wrote a vue sfc
<template>
<div>
{{message}}
</div>
</template>
<script>
export default {
name: 'TestComponent',
setup(){
const message = '123456';
return {
message
}
}
}
</script>
<style lang="scss" scoped>
.red{
color: red;
}
</style>
and import it in the entry js file.
import Test from './Test.vue';
export default function (Vue) {
Vue.component(Test.name, Test);
}
then i installed rollup-plugin-vue to compile vue sfc, postcss and sass to compile sass.
const path = require('path');
const inputPath = path.resolve(__dirname, './src/index.js');
const outputUMDPath = path.resolve(__dirname, './dist/datav.umd.bundle.js');
const outputESPath = path.resolve(__dirname, './dist/datav.es.bundle.js');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const babel = require('rollup-plugin-babel');
const json = require('rollup-plugin-json');
const vue = require('rollup-plugin-vue');
const postcss = require('rollup-plugin-postcss');
export default {
input: inputPath,
output: [{
file: outputUMDPath,
format: 'umd',
name: 'datav-bundle',
globals: {
vue: 'vue'
}
}, {
file: outputESPath,
format: 'es',
globals: {
vue: 'vue'
}
}],
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**',
}),
json(),
vue(),
postcss({
plugins: []
})
],
external: [
'vue'
]
}
Then IDE reported an error:
enter image description here
I installed #vue/compiler-sfc as well.
"#vue/compiler-sfc": "^3.0.6",
but the template was still not compiled.
D:\LAB\DataVisualization\libs\src\index.js → dist\datav.umd.bundle.js, dist\datav.es.bundle.js...
[!] (plugin commonjs) SyntaxError: Unexpected token (2:4) in D:\LAB\DataVisualization\libs\src\Test.vue?vue&type=template&id=07bdddea&lang.js
src\Test.vue?vue&type=template&id=07bdddea&lang.js (2:4)
1:
2: <div>
^
3: {{message}}
4: </div>
SyntaxError: Unexpected token (2:4) in D:\LAB\DataVisualization\libs\src\Test.vue?vue&type=template&id=07bdddea&lang.js
at Object.pp$4.raise (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.js:15857:13)
at Object.pp.unexpected (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.js:13549:8)
at Object.pp$3.parseExprAtom (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.js:15256:10)
at Object.pp$3.parseExprSubscripts (D:\LAB\DataVisualization\libs\node_modules\rollup\dist\shared\rollup.js:15059:19)
is there anything i did wrong ?
here is my package.json
{
"name": "libs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "rollup -wc rollup.config.dev.js",
"build": "rollup -c rollup.config.dev.js",
"build:prod": "rollup -c rollup.config.prod.js"
},
"keywords": [],
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.8",
"#babel/preset-env": "^7.13.8",
"#vue/compiler-sfc": "^3.0.6",
"rollup": "^2.40.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^6.0.0",
"sass": "^1.32.8",
"vue": "^3.0.6"
},
"dependencies": {
"sam-test-data": "0.0.5"
}
}

Answer 1

Oh, i think maybe i know the reason, i installed rollup-plugin-vue#6.0.0-beta.6 instead of *#6.0.0, compiled succefully!