Resolving Salesforce Lightning Web Components(LWS) errors(Trailhead example)

Lightning Web Components are launched few months back and already there are many write-ups/blogs to create your first few components. I’ve also recently jumped the bandwagon but faced lots of some challenges during set up and creating my first ‘Hello World’ component. On searching, I’m finding there is not much help available yet if you come across any failure.

I’m writing this blog so that others can benefit, if they face any such issue, which I’ve faced. Please note, as of now I’ve started doing trailhead module for this :

Your First lightning web component

First Error:

After installing  Salesforce CLI, I opened command prompt(same can be done, using ‘New terminal’ option on top bar-> Terminal option) – Typed ‘sfdx’ and as I expected, It gave :

‘sfdx’ is not recognized as an internal or external command,
operable program or batch file.

  • Now, nothing mentioned in trailhead, what to do, in case you fail such issue:
  • Resolving this is simple – all you’ve to do is to ‘edit’ path  in environmental variables and add path of ‘bin’ folder of Salesforce CLI. You can use path variable, mentioned in either User/System environmental variable(s). To edit environment variable,  type ‘edit env’ in Windows search and it will open screen, where you can edit it.
  •  Generally, bin folder is located in following location :C:\Program Files\Salesforce CLI\bin. Copy this path and paste in path of Environment variable as mentioned above.

Second Error :

Cannot find Lightning Component Bundle helloWorld
  • I faced this problem, when I was deploying components to an Org, which already has hello world (Aura) component available. Note that, it seems presence of even aura component with same Name, hinders deployment of LWC.
  • Preferably create new ‘Trailhead Org’, when you’re starting working on LWC.

Third Error : This weird error came from piece of code in helloWorld.html

<lightning-input
        label=”Name”
        value={greeting}       onchange={changeHandler}     >
</lightning-input>
  • If you notice,  in example, there are no double quotes(“”) around {greeting} and {changeHandler}. But on saving in VScode ,it was automatically adding quotes and because of compilation errors was coming.
  • To resolve this, I’ve to open the folder(again named helloWorld) , containing helloWorld.html file, using windows explorer(note: not from inside VSCode etc). Modify it with notepad(any editor, apart from VSCode) to remove these quotes.
  • After that, then I again right clicked ‘default’ folder and used ‘SFDX:Deploy Source to Org’ and then it worked like a charm!

Fourth Error : This happened while running below command :

Starting SFDX: Create a Default Scratch Org.
ERROR running force:org:create:  Must pass a username and/or OAuth options when creating an AuthInfo instance.
  • This means, that you’ve not set up DevHub Org properly. Scratch org needs DevHub to be set up properly.
  • As per my current understanding, this seems like Parent org for all the temporary scratch orgs. Ensure that, in atleast of your Trailhead(or Dev) org, DevHub(set up-> DevHub) is enabled
  • Then from terminal in VSCode running following commands:
    • sfdx force:auth:web:login -d
    • it should open browser. In that please enter credentials for org in which Debhub settings are enabled
    • You’ll see a message showing that you’ve successfully authorized yourself with org Id(<15/18 digit ID) of DevHub
    • Run next : sfdx force:auth:web:login -d -a DevHub

Another thing to Note: Make sure, you’ve authorized correct org(Trailhead Playground) using SFDC:Authorize an Org. if not sure, do it again.

Happy Coding! 🙂

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

<span>%d</span> bloggers like this: