Skip to content
This repository has been archived by the owner on Dec 1, 2020. It is now read-only.

Importing Vue components with Rollup #19

Closed
chopfitzroy opened this issue Mar 21, 2019 · 3 comments
Closed

Importing Vue components with Rollup #19

chopfitzroy opened this issue Mar 21, 2019 · 3 comments
Labels

Comments

@chopfitzroy
Copy link
Contributor

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 added a commit to EtienneSchmitz/vue-cli-plugin-p11n that referenced this issue Mar 27, 2019
In build mode, it is impossible to create components plugins because the import of vue files provokes errors.
By adding rollup-plugin-vue in the configuration of rollup, we can solve the problem.
See kazupon#19
@EtienneSchmitz
Copy link
Contributor

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 kazupon added Type: Feature New feature or request Status: In Progress labels Mar 28, 2019
kazupon pushed a commit that referenced this issue Mar 28, 2019
…@EtienneSchmitz

* 🐛 bug(core) : Correct the bug which prevents to use vue files.

In build mode, it is impossible to create components plugins because the import of vue files provokes errors.
By adding rollup-plugin-vue in the configuration of rollup, we can solve the problem.
See #19

* lint(core) : Resolve the problem with linter.

Problem with the linter : Extra semicolon  semi at 6.
@kazupon
Copy link
Owner

kazupon commented Mar 28, 2019

I've released v0.2.1

@sts-ryan-holton
Copy link

@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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants