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.
2 thoughts on “Gotcha to watch out for when using new Base Lightning Components”
I have been following your blog for a while now.I started working on lightning component development.I thought this particular post about base lightning components would answer my question.
What is the difference between ui: input and lightning: input and many other tags like this.Which ones to use
Thanks for reaching out. As far as the difference between ui:input and lightning:input, the later represents one of the new Base Lightning components that Salesforce has released to make Lightning development much easier on developers. It is a much better alternative to ui:input and includes many things built-in like the SLDS styling, as well as the validation that you would normally have to write your own JS code to provide. Check out this other post that I wrote which talks all about them: https://saramorgan.net/2017/03/18/why-lightning-base-components-are-so-awesome/. Good luck.