How to import jsconfig into a LWC?

Question

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.

Answer 1

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.

Answer 2

I'm not familiar with where you found jsconfig.json. But you can only import files that are uploaded to the org. Your file is only part of your File System and not Salesforce Org.

I would suggest the following options.

1. Create separate file in component folder

// data.js
export default const data = ['comp1', 'comp2'];

// component.js
import data from './data.js';

2. You can also store this data in the separate service component

// service.js
export const data ['comp1', 'comp2'];

// component.js
import {data} from 'c/service';

3. You can also load your data from Static Resource via Apex.