# I am trying to build a controls library using aurelia 2

**URL:** <https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106>\
**Category:** Help Requests\
**Created:** [March 11, 2021, 9:53am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106 "2021-03-11T09:53:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 11, 2021, 9:53am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/1 "2021-03-11T09:53:02Z")

</div>

Hi hoping someone can help, I am trying to create an aurelia vNext controls library for consumption in other AU2 projects

I create 2 projects (controlsLib, parentApp) using npx makes aurelia and choose npm and typescript from controlsLib project I export a component and run yarn build, I then copy the dist output to a folder called controlsLib under node\_modules of 2nd application (parentApp) I add an entry into package.json of parentApp “controlsLib”:“0.1.0”.

Then I run parent app but I get this error

index.js?61f9:1 Uncaught Error: Conflicting @aurelia/metadata module import detected. Please make sure you have the same version of all Aurelia packages in your dependency tree.

I have tried moving aurelia:“latest” into devDependencies of controlsLib but still get the same issue any pointers on this would be very much appreciated as not sure where to go from here

Oh and loving Aurelia 2 so far, I have used aurelia1 alot so nice to see a version 2

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [March 11, 2021, 10:05am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/2 "2021-03-11T10:05:48Z")

</div>

Not bad to check this library structure.

[Aurelia-Toolbelt v2](https://github.com/aurelia-toolbelt/vNext/tree/develop)

Mono repository with NPM v7 + custom configuration for your controls.

I think you wanna try to do something like that so clone it and make your hands dirty!

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 11, 2021, 11:22am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/3 "2021-03-11T11:22:25Z")

</div>

Thanks will take a look

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 12, 2021, 9:50am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/4 "2021-03-12T09:50:54Z")

</div>

Hi so I have been playing with the aurelia toolbelt project and don’t really see how it helps me achieve what I want.

I read somewhere that maybe I want an aurelia plugin but I see the docs for creating a plugin for aurelia 2 are not done yet.

Anymore pointers you can provide that would help?

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [March 12, 2021, 10:40am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/5 "2021-03-12T10:40:00Z")

</div>

If you are looking for writing a plugin [aurelia-toolbelt](https://github.com/aurelia-toolbelt/vNext/tree/develop) is really good sample.

What is your problem we that? Not bad to check [this tutorial](https://hamedfathi.me/write-a-custom-plugin-with-aurelia-2-and-lerna/) with Lerna too.

> but I see the docs for creating a plugin for aurelia 2 are not done yet.

I am writing a tutorial about custom plugins with a configuration in Aurelia 2 via mono-repository (NPM v7).

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 12, 2021, 11:03am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/6 "2021-03-12T11:03:28Z")

</div>

Hi Hamed

Yes sorry could have been more clear on my issues with toolbelt

I have looked through the toolbelt project and really not sure what part of it I should be looking at looks pretty similar to what I have apart from packages reference in package.json, additionally I cannot get the project to run or build and readme in parent folder is empty.

I am not 100% sure if I need a plugin not done anything like this before when using V1 aurelia my controls where part of the SPA project. Last week I managed to create a controls lib with React for consumption in other react apps but I have now managed to convince my company to switch to aurelia 2 porting the controls to au2 was pretty easy.

Now I need to build a controls library that is consumed by multiple apps and freely admit I am no expert on module loaders or webpack

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 12, 2021, 11:15am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/7 "2021-03-12T11:15:29Z")

</div>

> [@Infuser1](#):
>
> I then copy the dist output to a folder called controlsLib under node\_modules of 2nd application (parentApp) I add an entry into package.json of parentApp “controlsLib”:“0.1.0”.

For local development, you shouldn’t have to do this. There’ a few options:

1. From the root of your “parentApp”, you can do:

```auto
npm install ../controlLibs-folder-name

```

1. configure alias for webpack:  
In the `resolve` section of the `webpack.config.js` file, the `alias` property should look like this:

```ts
alias: {
  controlLibs: require('path').resolve(__dirname, '../controlLibs-folder-name')
}

```

* * *

Though, If you want to copy the dist files from the `controlLibs` to your `parentApp`, then you should at least copy the `package.json` along, or create a new one.

Either option 1 or 2 is nicer, and less manual work. If you want option 3, pay attention to the error

> index.js?61f9:1 Uncaught Error: Conflicting @aurelia/metadata module import detected. Please make sure you have the same version of all Aurelia packages in your dependency tree

It seems you need to fix the dependencies version on `2.x.x`, rather than the dev version

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 12, 2021, 11:21am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/8 "2021-03-12T11:21:07Z")

</div>

Hi Bigopon/Hamed

Really appreciate this assistance I will take a deeper look into your comments and see if helps, maybe a lack of copying package.json could be my issue this was not required for React so assumed it would be the same for aurelia.

Assume the versions cannot be different because both projects where created in exactly the same way

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 12, 2021, 11:24am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/9 "2021-03-12T11:24:40Z")

</div>

> Assume the versions cannot be different because both projects where created in exactly the same way

This may bite you, because there’ a lot of dev versions released daily, so if during project creation, you chose dev version instead of alpha version, you can actually get different versions of a module.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [March 12, 2021, 3:23pm UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/10 "2021-03-12T15:23:14Z")

</div>

Whenever you see the version conflict error that you saw, it’s a good idea to clear node\_modules and package-lock.json and then `npm i` to refresh the versions. On subsequent installs use `npm ci` instead of `npm i` to ensure the package-lock file is used.

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 15, 2021, 8:32am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/11 "2021-03-15T08:32:59Z")

</div>

So I tried the suggestions made but all resulted in the same issue, I asked a colleague to try creating a controls lib using AU2 to see if a second pair of eyes would help, but he got the same error.

For the time being I can copy the controls to the individual projects but not great long term, but I assume aurelia core team must be very busy at the moment so we can workaround this for a week or two.

Thanks Bigopon for teaching me about using npm install on a local project had no idea you could do this, thought it had to come from a npm repo.

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [March 17, 2021, 12:39pm UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/12 "2021-03-17T12:39:56Z")

</div>

Have you checked for duplicate metadata package folders in node\_modules?

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [March 17, 2021, 1:29pm UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/13 "2021-03-17T13:29:52Z")

</div>

Is it possible to share the repo here? Maybe someone can help and find the problem.

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 18, 2021, 8:15am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/14 "2021-03-18T08:15:34Z")

</div>

HI Hamed

I might well share a project but just found this on webpack site [https://v4.webpack.js.org/guides/author-libraries/](https://urldefense.com/v3/ __https:/v4.webpack.js.org/guides/author-libraries/__ ;!!Obbck6kTJA!Jp1mKzDXCtMcL85g-V24niAjUGZsByROxvMhjLnWkuNWs3G17mw3AQb8glFVUgU%24)

Think I will try that 1st might not be today

---

<div class="post-metadata">

**Author:** ![arjendeblok](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arjendeblok/32/802_2.png) [@arjendeblok](https://discourse.aurelia.io/u/arjendeblok)\
**Post date:** [March 18, 2021, 4:12pm UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/15 "2021-03-18T16:12:21Z")

</div>

I saw that you uses Yarn. Look at Yarn Workspaces.  
Create a monorepo structure and add a dependency in the package.json of your app to your controls library. You then do not have to copy the output of your control library to your app and get dependency issues. You can then use lage or lerna to built it all.

You can take a look at [GitHub - aurelia-ui-toolkits/aurelia-mdc-web: Aurelia wrapper for Material Design (Web) Components](https://github.com/aurelia-ui-toolkits/aurelia-mdc-web) . It has a demo app that links to the controls in separate packages.

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [March 18, 2021, 9:48pm UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/16 "2021-03-18T21:48:47Z")

</div>

He/She can do this with Npm v7+ too. This is the reason that I asked him/her to look at [Aurelia-Toolbelt v2](https://github.com/aurelia-toolbelt/vNext/tree/develop) structure.

Just like what I have written [here](https://github.com/aurelia/aurelia/blob/69f84598bfc72940ef6b6503831b49b3da6166fd/docs/user-docs/advanced-scenarios/write-custom-plugin.md) and also lerna verion as you said in [here](https://hamedfathi.me/write-a-custom-plugin-with-aurelia-2-and-lerna/).

---

<div class="post-metadata">

**Author:** ![arjendeblok](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arjendeblok/32/802_2.png) [@arjendeblok](https://discourse.aurelia.io/u/arjendeblok)\
**Post date:** [March 19, 2021, 6:04am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/17 "2021-03-19T06:04:44Z")

</div>

I agree that he can use npm workspaces too. But if already uses Yarn then he can also use Yarn workspaces. It works quite the same way.  
You can also use lage for building, but lerna is also a good choice.

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 19, 2021, 7:50am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/18 "2021-03-19T07:50:47Z")

</div>

Hi thanks for the comments sure they are all good just not that familiar with these technologies I only use them once every 2 years at most, I will have a look at Yarn workspaces thanks

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [March 19, 2021, 8:29am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/19 "2021-03-19T08:29:17Z")

</div>

No need to be familiar. Read what I have written in those tutorials. Each one of them is step-by-step guidance (the NPM7+ version is better). After finishing and practicing that sample, you will find out how to manage your custom plugins as easily as possible.

```auto
// You sample mapping to my tutorial.

controlsLib1 => bootstrap-v5-core
controlsLib2 => bootstrap-v5
parentApp => demo

```

I suggest you start with NPM 7+ instead of anything else. It is the official solution. you will have no problem doing the same with others although.

---

<div class="post-metadata">

**Author:** ![Infuser1](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/infuser1/32/2019_2.png) [@Infuser1](https://discourse.aurelia.io/u/Infuser1)\
**Post date:** [March 19, 2021, 9:37am UTC](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106/20 "2021-03-19T09:37:36Z")

</div>

Hi Hamed

Sure it’s knowing what docs to look at I was looking at web pack docs, or whether it was an aurelia issue. None of this was required to get this working in react but obviously react and aurelia work very differently.

Anyway managed to get this working using Yarn thanks arjen for pointing me in the direction of yarn workspaces which might also be used in toolbelt but it was not obvious to me what was happening by just looking at the project and toolbelt did not seem to run for me.

This was the link I used

> **[Yarn](https://classic.yarnpkg.com/en/docs/workspaces/)**
>
> Fast, reliable, and secure dependency management.

Just not sure now if this is what we want, I need to discuss with my wider team I think

[Next page](https://discourse.aurelia.io/t/i-am-trying-to-build-a-controls-library-using-aurelia-2/4106.md?page=2)