Gotcha to watch out for when using new Base Lightning Components

This weekend I discovered a very annoying issue (which I kind of consider to be a bug) when working with the new Base Lightning Components. Don’t get me wrong, I love these new components and think they are awesome. But, this particular issue had me banging my head for a few hours and I really wish I had those hours back. So, to save you from the same pain I experienced, I am writing about the issue here.

I would not be surprised if other developers encounter this same issue when they go to convert Lightning Components from using the older ui components to the new lightning ones. This was what I was doing and when I went to preview the component and all I got was a loading image and a message in the console that told me I had encountered an Internal Server Error. This error is essentially meaningless and just indicates that some error has occurred that was not properly handled by the system. Ughhhh, no help at all.

Everything in my code appeared right and it took me a while to finally notice that one of the components I had converted (the ui:inputText component to the new lightning:input) was missing the name attribute. Turns out that the name attribute is required for the new component. It was not required or even used for the ui:inputText component, which is why I failed to notice it in the first place.

Rather than give me a message when I try to save the markup or even trap the error and give me a legitimate message in the console log, I got the rather useless and general Internal Server Error. I imagine this will be resolved at some point, but in the meantime, I am writing this up to hopefully save someone else the misery I felt trying to figure out what was going on.

And if you are new to Lightning development and not sure what the new Base Lightning Components are all about and why you would want to use them, check out this post. Or, you can check out my latest course, which has a module that covers using them.