rollup-plugin-vue not working in when bundling in browser

[sijakret]

does this plugin support in-browser rollup setups? i can't seem to get it to work (in a client-side setup without node).

in principle, however, rollup supports client-side bundling..

[znck]

It uses node path module and process.cwd().

And again, the @vue/component-compiler depends on path and fs.

[Jinjiang]

FYI: I have tried some ways to run rollup-plugin-vue in a browser to build Vue SFC. Now It already works for very normal cases. But:

• consolidate is removed to disabled all template preprocessor
• postcss is removed to disabled all style preprocessor (actually postcss could work alone in browser (after itself bundled by webpack) but failed with postcss-modules-sync together)

And I used rollup-plugin-node-builtins, rollup-plugin-node-globals path-browserify and browserfs to workaround. But I am not sure the syntax <block src="xxx"> all work well.

Still trying and will look deeper in that.

Thanks.

[baryla]

Any news on this?

[jeremyruppel]

Just ran into this myself and, let's just say the fix wasn't terribly straightforward. Here's what I found for anyone still running into this:

First, I'm assuming you are precompiling your vue components (ie you only want to include the vue runtime in your build), but you're still running into Uncaught ReferenceError: process is not defined. Vue's dist README has all the answers.

Install @rollup/plugin-alias to alias vue to the runtime only version at vue/dist/vue.runtime.esm.js. Then install @rollup/plugin-replace to replace all process.env.NODE_ENV with '"production"'. Your config will end up looking something like this:

import replace from '@rollup/plugin-replace';
import alias from '@rollup/plugin-alias';

export default {
  // yada yada
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    alias({
      entries: {
        'vue': 'vue/dist/vue.runtime.esm.js'
      }
    }),
    resolve(),
    vue(),
  ]
};

Note that if you're using the resolve plugin to find vue (you probably are), these two plugins need to come before that. Hope this helps!

[akauppi]

There's also the way of not pulling Vue from npm, but loading it from CDN in index.html. I'm creating a browser app with native ES6 modules ("bundling in browser"?) and there are no issues.

I'm not really seeing this as a rollup-plugin-vue issue, though people likely will come to find the solution here.

[truesilver92]

@akauppi I am trying the same thing with systemjs, but I am having an error where createVNode is used all over the place in my bundle (from what I can tell rollup-plugin-vue uses it in expectation that the vue runtime exports it) but vue and vue runtime don't export them

I also see that createCommentVNode and createTextVNode are used. I can find the export for createTextVNode in vue/src/core/vdom/vnode.js

I have this same problem both when I try to use a cdn in the browser or try to bundle the vue runtime

Why is createCommentVNode and createTextVNode being used as functions when vue doesn't export them? Or (more likely) what am I messing up with my rollup build?

[truesilver92]

I was able to solve the issue by switching to rollup-plugin-vue2

[miili]

I was able to solve the issue by switching to rollup-plugin-vue2

Same here. Apparently the old rollup-plugin-vue was renamed to rollup-plugin-vue2. The new rollup-plugin-vue serves Vue3. Seriously, wtf, why?

[max-arias]

I was able to solve the issue by switching to rollup-plugin-vue2

Fucking hell, HOURS wasted. This fixed it for me. If you're getting errors like "x" was not found in 'vue' Try using this.