I am developing a catalog of all the LWCs and I want a dynamic list of the components. I figured since jsconfig.json already has the dynamic list of the components in a handy JSON form, I can just import it into my LWC and display the list there. However, when trying to import the jsconfig, I get the error:
LWC1011: Failed to resolve import "../jsconfig.json" from "componentCatalogHeader.js". Please add "../jsconfig.json" file to the component folder.
At the top of my JS file for the LWC, I have this import statement:
import componentData from "../jsconfig.json";
As my jsonfig is located in my LWC directory, which is the parent to the LWC's directory.
Best Answer
Short answer: you can't.
The jsconfig.json file exists to help the IDE identify Javascript project directories to aid with code-completion mechanics. For example, a supported IDE might offer suggestions of other js modules when writing an
import
statement in another js module inside a directory with jsconfig.json in the root directory.In addition to this, the jsconfig.json file is never deployed to the org, meaning it cannot be referenced from a LWC.
Possible Solution: Use a script to generate and store a static list of LWCs
Assuming you have all your LWCs locally:
lwc_list.resource-meta.xml
(see below for contents)import lwcList from '@salesforce/resourceUrl/lwc_list'
Linux/Bash
Windows
lwc_list.resource-meta.xml
Future Solution: Query for Lightning Component Bundles using Apex
There was a request via Twitter to expose LightningComponentBundle much like how you can query AuraDefinitionBundle currently. https://twitter.com/tahir_farhan/status/1085939366764134401?s=09
With this object exposed, you could call an Apex method that queries LWCs in your org and display a list in the component. However, there hasn't been an update for months.