Unable to build Lightning Component source for markup://c:HelloWorldLightningWebComponent: Invalid suffix: json

Question

I have created a project named "HelloWorldLightningWebComponent", and created a LWC component to it. While deploying the source to org from VSC, getting the error message. I have checked the version in both lwc's meta file and also sfdx-project.json file, its the same (45.0). Any ideas what is missing?

Also verified the source org for component with same name and didnt find any.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

{
  "packageDirectories": [
    {
      "path": "force-app",
      "default": true
    }
  ],
  "namespace": "",
  "sfdcLoginUrl": "https://login.salesforce.com",
  "sourceApiVersion": "45.0"
}

Answer 1

JSON suffix error. It happened to me and I changed the repository name from "lwc" to "LWC" and solved the problem.

Answer 2

This error happens if you already have a Lightning Web Component in your instance with the same name that you are trying to create a new one.

Hence make sure to use a New org if you are doing a Trailhead or refresh all the components from your org using the Org Browser to make sure you are editing instead of adding a new one.

Answer 3

I saved my project by mistake inside another projects's force-app\mian\default\lwc. Changed the location and that solved the problem.

Answer 4

Not sure if that was the cause but I accidently created the new project under main folder of another project and when I was trying to deploy I got this error . Later I deleted the new project folder and made separate folder and I was able to deploy the component .

Answer 5

I had the same issue. Turns out it was a typo in my test folder name, I had an extra underscore in the folder name.

Answer 6

for my situation, it seems cause by a experimental feature "salesforcedx-vscode-core.experimental.deployRetrieve". go to file > preference and disable deployRetrieve

Answer 7

I had a similar error. In my case I had a folder named lwc in the navigation path to the actual location of the of the project. And I had another component at the same level as the correct one. Once I removed the entire folder of the extra component and updated the lwc folder, I was able to get past this error.

Answer 8

Just experienced the same issue. It's because I tried to delete files in my current project and authorize/deply to org from there. Resolved when I created a new project for the new files.

Answer 9

Make sure that none of the folders in the Project path has name "lwc". I faced this issue as well, and fixed it by changing the name of a subfolder named "lwc" in the project-path to something else.

Answer 10

In my case i had saved a .json file in the root folder for my LWC. Removing it solved the problem.

Answer 11

Not sure if this is helpful.

Was fortunate enough to catch a codebase with very similar metadata failing full package version creation complaining about "unable to build lightningcomponent..."

ended up being an adjustment to my .forceignore to include :

# LWC Jest
**/__tests__/**

This is what was needed as an addition. I already had the below:

# LWC configuration files
**/jsconfig.json
**/.eslintrc.json