TypeError: vue.openBlock is not a function, while using vue component from custom node module

Question

I created custom node module which supports vue.

Package.json

{
 "name": "test-node-module",
 "version": "1.0.0",
 "description": "",
 "main": "./dist/index",
 "scripts": {
   "dev": "vue serve test.vue",
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "Sam",
 "license": "ISC",
 "devDependencies": {
   "@vue/compiler-sfc": "^3.0.0-beta.15",
   "bili": "^5.0.5",
   "rollup-plugin-vue": "^6.0.0-beta.6",
   "vue-template-compiler": "^2.6.11"
 }
}

index.js

import test from "./test.vue"

 export default {
   install(Vue, options) {
     Vue.component("test", test);
   }
 }

test.vue has simple text.

And in the main.js in my project

import Test from "test-node-module"

Vue.use(Test)

Using the component <test></test> shows errors like this.

[Vue warn]: Error in render: "TypeError: vue.openBlock is not a function"

In the custom node nodule this is how dist/index.js file looks like.

'use strict';

 var vue = require('vue');

 var script = {};

 function render(_ctx, _cache) {
   return (vue.openBlock(), vue.createBlock("div", null, " Test123 "))   // Error is here...
 }

 script.render = render;

 var index = {
   install: function install(Vue, options) {
     Vue.component("test", script);
   }
 };

 module.exports = index;

How do i solve this problem? Did i miss any thing?

Answer 1

Recent versions of rollup-plugin-vue needs Vue 3 to function properly, while Vue-cli installs Vue v2. There are 2 options: either installing Vue 3 in your project or using older version of rollup-plugin-vue.

Currently the version 5.0.0 works for me:

"rollup-plugin-vue": "5.0.0",

This is a known issue of the package which hasn't received official reply yet https://github.com/vuejs/rollup-plugin-vue/issues/363