Creating Multipage App with VueJS is not working

[mario-minati]

We are trying to create a multipage app with Mojolicious, VueJS and AssetPack using the RollupJS Pipe.

The startup code is working so far as expected:

  $self->plugin(AssetPack => {pipes => [qw(RollupJs)]});
  $self->asset->store->paths([$self->home->rel_file('src')]);

  # Add Vuejs as dependencies
  push @{$self->asset->pipe('RollupJs')->modules}, 'vue';
  unshift @{$self->asset->pipe('RollupJs')->plugins}, 'rollup-plugin-vue';

  # Process app.js
  $self->asset->process('app.js' => 'main.js');

The main.js is somewhat straight forward:

import 'core-js/es6/promise'
import 'core-js/es6/string'
import 'core-js/es7/array'

import Vue from 'vue'
import Vuex from 'vuex'
import BootstrapVue from 'bootstrap-vue'
import router from './router'
import store from './store';
import App from './App'
import config from '@/shared/config'

Vue.config.productionTip = false;

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    App
  }
})

Starting morbo leads to the following error:

/tmp/assetpack-rollup.js:22
  plugins: [plugin_rollup_plugin_vue(),plugin_rollup_plugin_node_resolve(),plugin_rollup_plugin_commonjs()]
            ^

TypeError: plugin_rollup_plugin_vue is not a function
    at Object.<anonymous> (/tmp/assetpack-rollup.js:22:13)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:266:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

While trying to find out what the reason is, we stumbled upon an unexpected return value in the nodejs code generated from RollupJS.

push @import, "var $func = require('$plugin');\n";

This returns an Object:

{ default: [Function: VuePlugin] }

After adding some fixing code to RollupJS

push @import, "if (typeof $func == 'object') {$func = $func.default};\n";

We still cannot sucessfully run the code:

(node:4216) UnhandledPromiseRejectionWarning: Error: Could not resolve './App' from src/main.js
    at error (/home/glue/src/glue-frontend/node_modules/rollup/dist/rollup.js:3365:15)
    at /home/glue/src/glue-frontend/node_modules/rollup/dist/rollup.js:21504:25
(node:4216) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4216) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

The not found file './App' is there, is it named 'App.vue'. What has to be done, that '*.vue'-files are handled appropriatly?

[jhthorsen]

Looks like what is different from my test app and your code is that I specify the extension. Like this:

import App from './App.vue'

• Have you looked at the unit test https://github.com/jhthorsen/mojolicious-plugin-assetpack/blob/master/t/rollup.t#L18-L24 ?
• And the example app https://github.com/jhthorsen/mojolicious-plugin-assetpack/blob/master/t/assets/js/vue-app.js ?

Does the test run for you?

[mario-minati]

Cloning the repo and testing rollup.t was not sucessfull. I attached the bash output: rollup.t.log

I got these results on a pretty new clean vm using mate ubuntu. The npm -v output is attached.

Do we run into issues with npm changes?

[jhthorsen]

That might be... I thought I had cleaned up my node_modules, but I have to look at it again.

Hopefully get back to you tomorrow or on Monday.

[jhthorsen]

This should be fixed now in version 2.06.

Note though that I had to change the attributes to be compatible with the new rollup API.

[mario-minati]

Sorry, but we still cannot prove rollup.t. Attached is the log of testing a new repo clone: rollup.t.v2.06.log

Maybe you can look at it again. Can I help with any further files or tests.

[jhthorsen]

I don't think you're running 2.06, since it does not generate that line of plugins. It creates this:

plugins: [resolve({}),commonjs({"sourceMap":true}),terser({}),vue()]

You need to run prove -l if you want to load from ./lib instead of the installed version on your system.

[mario-minati]

Sorry, your are right, tests are now passing nicely.

Thanks for your time && help.

[mario-minati]

Further testing revelead that ./example/rollup.pl needs to be fixed: unshift @{app->asset->pipe('RollupJs')->plugins}, ["rollup-plugin-vue", "VuePlugin"];

You have to install npm i vue-template-compiler --save-dev by hand otherwise the example rollup.pl will not be compiled, maybe this can go into the docs. :-)

[jhthorsen]

The example should work as well now.