1

I have this nested lwc folder structure

--force-app
  -- main
    -- default
      -- lwc
        -- parent
          -- lwc
            -- child

When trying to deploy into my sandbox:

in vscode if I use SFDX: Deploy Source to Org to deploy a modified child component into my sandbox, the deployment gets done but I can't see the changes reflected in the org.

If I use sfdx force:source:deploy -p force-app/main/default/lwc/parent/lwc/child/ it does not work either.

I only see the changes when I do a sfdx force:source:convert and sfdx force:mdapi:deploy, updates on child are reflected in the sandbox.

But If I go to the org browser in vscode, I can see child listed just below the lwc folder, so there is a 'lwc/parent' and 'lwc/child', If I retrieve source from Org then it gets retrieved into force-app/main/default/lwc/child and if I modify that file and deployed with SFDX: Deploy Source to Org or sfdx force:source:deploy -p force-app/main/default/lwc/child/ then the changes are reflected.

So I guess that when it gets converted into metadata, all lwc would fall into a lwc/component kind of route as the Salesforce DX Project Structure and Source Format Documentation says. Deploy it into lwc/component/lwc/component just wont work

Is there a way to use sfdx force:source:deploy or vscode SFDX: Deploy Source to Org to actually see the changes without doing a full deployment? or is it just a wrong folder structure? It does work when converting it to metadata though, so what's is really happening there? (beside my assumptions from the above paragraph). Thanks!

PS: this is a big project and it's not that easy to "change the structure", it's a possibility, but I would recommend not to give me that answer, I understand that changing the structure and leave child in default lwc folder would work, but nesting lwc folders help us maintain a bit of an order and as I said earlier, it does work with a metadata deployment, so i'm keen to understand why that is happening

2
  • 1
    Just to explain a bit further, since it wasn't mentioned, is that the lwc/componentName becomes the root for the entire component. You can have other folders inside it to organize a component's scripts and resources internally, which are, I believe, flattened upon deployment/compilation. So, lwc/parent/lwc/child/child.js would create a child.js in the parent component that you could use to import from, e.g. import someMethod from './child.js'.
    – sfdcfox
    Apr 3, 2022 at 18:17
  • Cool, thanks it's a good clarification
    – djpeluca
    Apr 5, 2022 at 18:50

1 Answer 1

4

It doesn't work because it isn't supported to have components in sub-folders under lwc.

The documentation you linked, Salesforce DX Project Structure and Source Format, notes

Lightning web components must reside in a directory named lwc under the directory.

The components themselves must be under lwc. Anything under the first lwc will be considered a lightning web component and is put under the c: namespace.

The best you can do, which probably doesn't really help your goal, is creating multiple package directories

  • force-app/parents/main/default/lwc
  • force-app/children/main/default/lwc

Unfortunately, there is no answer to give you that doesn't involve saying you can't do what you're trying to do.

You can see issues have been opened against the CLI (example with aura) and it's been re-iterated that LWC needs to be the direct child of the /lwc folder.

all component bundles should be the direct child of the /lwc folder.

✅ lwc/myComponent

❌ lwc/subfolder/MyComponent

1
  • Good enough for me, Thanks!
    – djpeluca
    Apr 1, 2022 at 14:30

Not the answer you're looking for? Browse other questions tagged .