search

kazupon / vue-cli-plugin-p11n

:electric_plug: Vue CLI 3 plugin to pluginize your Vue project
MIT License
113 stars 13 forks source link

Importing Vue components with Rollup #19

Closed chopfitzroy closed 5 years ago

chopfitzroy commented 5 years ago

I am trying to setup a install a Vue component like so:

import Search from "./components/Search.vue";

const version = "__VERSION__";

const install = Vue => {
    Vue.component(Search.name, Search);
};

const plugin = {
  install,
  version
};

export default plugin;

if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(plugin);
}

However when I try to build (npm run build) I get the following output:

Building for production mode as plugin ...
 ERROR  Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (.../module-search/node_modules/rollup/dist/rollup.js:3601:30)
    at Module.error (.../module-search/node_modules/rollup/dist/rollup.js:14477:9)
    at tryParse (.../module-search/node_modules/rollup/dist/rollup.js:14397:16)
    at Module.setSource (.../module-search/node_modules/rollup/dist/rollup.js:14671:35)
    at .../module-search/node_modules/rollup/dist/rollup.js:17836:20
 ERROR  Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (.../module-search/node_modules/rollup/dist/rollup.js:3601:30)
    at Module.error (.../module-search/node_modules/rollup/dist/rollup.js:14477:9)
    at tryParse (.../module-search/node_modules/rollup/dist/rollup.js:14397:16)
    at Module.setSource (.../module-search/node_modules/rollup/dist/rollup.js:14671:35)
    at .../module-search/node_modules/rollup/dist/rollup.js:17836:20
 ERROR  Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (.../module-search/node_modules/rollup/dist/rollup.js:3601:30)
    at Module.error (.../module-search/node_modules/rollup/dist/rollup.js:14477:9)
    at tryParse (.../module-search/node_modules/rollup/dist/rollup.js:14397:16)
    at Module.setSource (.../module-search/node_modules/rollup/dist/rollup.js:14671:35)
    at .../module-search/node_modules/rollup/dist/rollup.js:17836:20
 ERROR  Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (.../module-search/node_modules/rollup/dist/rollup.js:3601:30)
    at Module.error (.../module-search/node_modules/rollup/dist/rollup.js:14477:9)
    at tryParse (.../module-search/node_modules/rollup/dist/rollup.js:14397:16)
    at Module.setSource (.../module-search/node_modules/rollup/dist/rollup.js:14671:35)
    at .../module-search/node_modules/rollup/dist/rollup.js:17836:20

After reading some of the other issues I think I may need rollup-plugin-vue but I am not entirely sure how to integrate this.

Cheers!

EtienneSchmitz commented 5 years ago

Hello.

Same problem with my programm. The Vue file did not parse and I solved the problem by adding https://github.com/vuejs/rollup-plugin-vue during the compiling time.

I suggest a PR.

Cheers !

kazupon commented 5 years ago

I've released v0.2.1

sts-ryan-holton commented 4 years ago

@kazupon Still not working on 0.2.1, 0.3.0 and 0.4.0, my plugin.js file is:

/*
 * NOTE:
 *   This file is plugin stub for main.js
 */

import Vue from 'vue'
import VueResource from 'vue-resource'
import { ValidationProvider, ValidationObserver, extend, configure } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

const config = {
  classes: {
    valid: '',
    invalid: 'is-danger'
  }
};

configure(config);

Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});

// Register it globally
Vue.component("validation-observer", ValidationObserver);
Vue.component("validation-provider", ValidationProvider);

import plugin from './index'

Vue.use(VueResource)
Vue.use(plugin)

/*
 * NOTE:
 *   If you want Vue instance of main.js to import something in your plugin as a Vue option,
 *   you need to export it here.
 */
// export default plugin