1

Context

I have a parent component in vscode.

parent.html

<template>
    <my-child-component></my-child-component>
</template>

parent.js

import { LightningElement, api } from 'lwc';

export default class Parent extends LightningElement {}

I have a child component in different files using SFDX vscode.

myChildComponent.html

<template>
    <div>Hello World</div>
</template>

myChildComponent.js

import { LightningElement, api } from 'lwc';

export default class Parent extends LightningElement {}

My vscode file structure looks like this:

--force-app
--|main
---|default
----|aura
----|lwc
-----|app
------|parent.html
------|parent.js
------|myChildComponent.html
------|myChildComponent.js
----|.eslintrc.json
----|jsconfig.json

My jsconfig.json looks like this.

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "c/player": [
                "app/parent.js",
            ]
        }
    },
    "include": [
        "**/*",
        "../../../../.sfdx/typings/lwc/**/*.d.ts"
    ]
}

Question

How do I add the myChildComponent into the parent component using SFDX and vscode? I have tried running the code as is above, and I have tried adding this into the jsconfig.json

"paths": {
            "c/player": [
                "app/parent.js",
                "app/myChildComponent.js"
            ]
        }
2

That's not how LWC works. Each component should be in its own folder. That is, your file structure would look more like this:

-- force-app
--| main
---| default
----| lwc
-----| parent
------| parent.html
------| parent.js
-----| myChildComponent
------| myChildComponent.html
------| myChildComponent.js

Check out the docs and look at an example, more of which you can find on the Trailhead.

1

@sfdcfox gave an awesome answer/guidelines. For others who might have a similiar question I have some subtle points that I missed.

The file structure should include meta.xml files for each component.

-- force-app
--| main
---| default
----| lwc
-----| parent
------| parent.html
------| parent.js
------| parent.js-meta.xml
-----| myChildComponent
------| myChildComponent.html
------| myChildComponent.js
------| myChildComponent.js-meta.xml

The parent XML can look like this:

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

The myChildComponent XML can look like this:

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

Also, one addtional small point I found. In the parent.html reference to myChildComponent should be wrapped in a div tag.

<template>
  <div>
    <c-myChildComponent></c-myChildComponent>
  </div>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.