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
2 Likes
Not bad to check this library structure.
Aurelia-Toolbelt v2
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!
2 Likes
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?
1 Like
If you are looking for writing a plugin aurelia-toolbelt is really good sample.
What is your problem we that? Not bad to check this tutorial 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).
1 Like
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
1 Like
For local development, you shouldn’t have to do this. There’ a few options:
- From the root of your “parentApp”, you can do:
npm install ../controlLibs-folder-name
- configure alias for webpack:
In the resolve section of the webpack.config.js file, the alias property should look like this:
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
1 Like
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
1 Like
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.
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.
2 Likes
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.
1 Like
Have you checked for duplicate metadata package folders in node_modules?
1 Like
Is it possible to share the repo here? Maybe someone can help and find the problem.
1 Like
HI Hamed
I might well share a project but just found this on webpack site https://v4.webpack.js.org/guides/author-libraries/
Think I will try that 1st might not be today
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 . It has a demo app that links to the controls in separate packages.
1 Like
He/She can do this with Npm v7+ too. This is the reason that I asked him/her to look at Aurelia-Toolbelt v2 structure.
Just like what I have written here and also lerna verion as you said in here.
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.
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
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.
// 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.
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
Just not sure now if this is what we want, I need to discuss with my wider team I think
1 Like