DEV Community

Discussion on: Creating a Vue module with Rollup and Typescript

jesus9ias profile image
Jesús Escamilla Author

That's looks ok, how are you importing and setting the components? I see there is a type mismatch in the error

Thread Thread
simonmarcellinden profile image
Simon Marcel Linden • Edited

I export the components in my package ("@ simon.marcel.linden / ExampleComponents") in the index.ts under src / lib-components as follows

export { default as component1 } from '@/lib-components/component1/component1.vue';
export { default as component2 } from '@/lib-components/component2/component2.vue';
export { default as component3 } from '@/lib-components/component3/component3.vue';
Enter fullscreen mode Exit fullscreen mode

And then I import them in another project

import { Component, Vue } from "vue-property-decorator";

import {component1} from "@simon.marcel.linden/ExampleComponents";
import {component2} from "@simon.marcel.linden/ExampleComponents";

@Component({
  components: {
    component1,
    component2,
  }
})
export default class AwesomePackage extends Vue {

}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
simonmarcellinden profile image
Simon Marcel Linden • Edited

Hi @jesus9ias , I updated vue-sfc-rollup to the latest version and copied my components. Now it seems to be working. It's strange. I haven't changed anything in my code.

Currently, I am importing the components all individually as shown in my example above. If I want to import everything at once, I do this as follows:

import MyComponents from @ simon.marcel.linden / ExampleComponents';

Vue.config.productionTip = false
// Vue.use (lNavbar);
Enter fullscreen mode Exit fullscreen mode

I then get the following error

Syntax Error: Error: No ESLint configuration found in 'packagename/dist'

Any idea how I can fix this?

Thread Thread
jesus9ias profile image
Jesús Escamilla Author

The new error seems to be the app requires eslint in some process, do you have installed locally or globally?

Thread Thread
simonmarcellinden profile image
Simon Marcel Linden

Hello, is installed locally and globally. But it looks like a problem with

npm link

. Before I publish my packages, I always test them.

To do this, I use

npm link

and then link my package with my test project. The error mentioned above then appears.

But if I publish the package and then install it with

npm install

the error disappears.

Thread Thread
jesus9ias profile image
Jesús Escamilla Author

Hello @simonmarcellinden in that case you can try to test locally using npm pack and install them referencing the created tgz file instead of npm link. It is more similar to installing from public npm.

Thread Thread
simonmarcellinden profile image
Simon Marcel Linden

thanks for the tip, I'll try this and report me

Thread Thread
simonmarcellinden profile image
Simon Marcel Linden • Edited

@jesus9ias , great tip. It's work fine.

thanks a lot