Production build issues with webpack

Framework Knowledge
1

I’m prepping my project for a 1.0 release! 2+ years of work is about to be officially turned over. Version 1.0 will probably never go live as we have to go through certification which will take months and by then we’ll be a few versions newer.

My issue. I guess we haven’t tried to run a production build in quite some time. The build will complete with no issues, but when loading the site I get an error
"Attempted to register an element with the same name already exists. Name : e."

I cannot share this code, but what can I be looking for with this vague error. As far as I know nothing is named the same. My last debug message before the error is the resources being loaded.

1 Like
2

Most likely an issue with consistent naming. See here for an example https://stackoverflow.com/questions/41447671/aurelia-attempted-to-register-an-element-when-one-with-the-same-name-already-ex

Here is another one https://stackoverflow.com/questions/52230755/aurelia-error-attempted-to-register-an-element-when-one-with-the-same-name-alr

1 Like
3

I came across that before posting and started looking into it. Unfortunately I can’t find any issues with naming

1 Like
4

Well perhaps try commenting out parts until it passes to see where it gets stuck. Webpack can be quite a bi*** so I hope you’ll get it sorted before commenting out every single component

1 Like
5

That’s what I have been doing. Nothing is making sense :frowning: I cleared out my resources index to class added to the array and it works, add another and nothing. I look at the file that I added and I don’t see the reason for failure.

They are global, so I’m not importing them on the consuming view.

1 Like
6

Any plugins you’re perhaps consuming that could cause the issue? Also is it only in prod it breaks but works for dev?

1 Like
7

Heres a similar q: https://stackoverflow.com/a/52240018/6672580

Can you give it a try to see it still persists?

Edit: normally one would introduce this via dialog usage, import view model and use it directly instead of a string. The issue with direct/static view model import is its module gets concatenated, so its get renamed and many other things. One way to handle is to add a line like this:

PLATFORM.moduleName('path to vm')

Just that, to let aurelia webpack plugin kick in to prevent those webpack behaviors

1 Like
8

I’ll try that tomorrow. I bet that is the issue. I’m not looking forward to adding PLATFORM.moduleName to everything :frowning:

@zewa666 It’s only a prod issue. Dev has always worked fine

1 Like
9

Changing all my global resources to use PLATFORM.moduleName fixed it.

Sadly at one point I had it that way and changed it because I liked how clean it was to just reference the class there :frowning: That was a long exercise to update 3 plugins with full build pipelines and then update the actually application

Thanks for the help

1 Like
10

New issue…

MOST of my CSS is good, but some appears to be missing. Hard to tell when it’s bundled.

Extract CSS definately causes an issue, but even if i disable that, I’m still seeing areas that are just not right. Its as if a style is MIA.

1 Like
11

I would not suggest sudden change from static import to platform moduleName across entire codebase, especially when the problem may just come from one or 2 places. It sounds you need some help, if its sharable i can help have a look. For the style, does it say or warn anything when style goes missing?

1 Like
12

It was all the global resources only, but there were enough to drive me crazy.

I’m now only having an issue when extract css is enabled. I have no problems leaving this disabled though. There are no errors from the webpack output

1 Like
13

Glad you hear you solved it. But I think it can still satisfy both “clean looking” & functional requirements :smiley: