Subscribe on changes!

@vue/compiler-sfc gives "TypeError: Cannot read property 'refSugar' of undefined" error

avatar
Sep 24th 2021

Version

3.2.17

Reproduction link

sfc.vuejs.org/

Steps to reproduce

I'm trying to setup my application using vue@3.2.17, rollup@2.57.0, and rollup-plugin-vue@6.0.0-beta.10. here is my files:

rollup.config.js

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import vue from 'rollup-plugin-vue';

export default {
  input: 'main.js',
  output: {
    format: 'iife',
    file: 'dist/bundle.js',
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    vue(),
  ],
};

main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp().mount('#app');

App.vue

<template>
  <div>Test</div>
</template>

<script>
export default {
    name: 'App',
};
</script>

But when i try to build my application, rollup says:

[!] (plugin vue) TypeError: Cannot read property 'refSugar' of undefined

and it seems it come from this line of @vue/compiler-sfc module.

What is expected?

create the dist/bundle.js file.

What is actually happening?

@vue/compiler-sfc says [!] (plugin vue) TypeError: Cannot read property 'refSugar' of undefined

avatar
Sep 24th 2021

rollup-plugin-vue is no longer maintained. Please use Vite instead (it uses Rollup under the hood and has official Vue plugin).