[SalesForce] How to import jsconfig into a LWC

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:

  1. Create a static resource lwc_list.resource-meta.xml (see below for contents)
  2. Run the script below, relevant to your OS to generate a list of LWCs
  3. In your LWC import the resource import lwcList from '@salesforce/resourceUrl/lwc_list'
  4. Split the contents by the new line character (\n) and iterate through it in your markup

Linux/Bash

cd force-app/main/default/lwc
ls -d */ > ../staticresources/lwc_list.txt

Windows

cd force-app/main/default/lwc
dir /a:d /b > ../staticresources/lwc_list.txt

lwc_list.resource-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>text/plain</contentType>
    <description>Generated list of Lightning Web Components</description>
</StaticResource>

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.

Related Topic