LWC Module Resolution

LWC Module Resolution: All JavaScript files in Lightning web components are ES modules. An ES module is a JavaScript file that explicitly exports variables or functions that other modules can import and use. A Lightning web component that renders UI consists of an HTML template and an ES module.

<!-- example.html -->
<template>
    My website Learnsalesforce.co
</template>

The ES module of a UI component must import LightningElement from lwc, which is the core module of Lightning Web Components. The default export must be a class that extends LightningElement, which is a custom wrapper of the standard HTML element.

// example.js
import { LightningElement } from 'lwc';

export default class Example extends LightningElement {}

To share code between components, create an ES module that acts as a library (also known as a service component). Export the variables or functions that you want to share, and then import them into other modules that want to use them.

LWC Module Resolution

Module resolution is not available on the Salesforce Platform. See LWC Open Source. Because ES modules import other modules, at build time the compiler has to find all the module files. This process is called module resolution.

Module resolution provides a uniform way to build and use modules across multiple repos and npm packages. You can import components from anyone by using just npm. You can also distribute your own components via npm.

Configure Module Resolution

To tell the compiler how to resolve modules, add configuration information at the root of the project. There are two ways to configure module resolution.

• Add a lwc.config.json file at the root of the project.
• Add an lwc key to the package.json file.

// package.json
{
    "name": "my-app",
    "version": "1.0.0",
    "lwc": {
        "modules": [
            /* list of module records */
            {
                "dir": "src/modules"
            }
        ]
    }
}

// lwc.config.json
{
    "modules": [
        /* list of module records */
        {
            "dir": "src/modules"
        }
    ]
}

The modules key holds an Array of ModuleRecords. A module record is an object with a specific shape depending on the type of module record it holds. You need at least one ModuleRecords entry that points to your local source. There are three types of ModuleRecords.

• AliasModuleRecord—Defines a specifier that points to a specific module. Must have name and path keys.
• DirectoryModuleRecord—Defines a folder where many namespaced modules can be defined. Must have a dir key.
• NpmModuleRecord—Defines a set of packages that hold more modules to be resolved. Must have an npm key.

{
    "modules": [
        {
            "dir": "src/modules"
        },
        {
            "name": "ui/button",
            "path": "src/modules/ui/button/button.js"
        },
        {
            "npm": "lwc-recipes-oss-ui-components"
        }
    ]
}

Specificity is resolved from inner to outer, merging upwards.

Distribute Your Component Using npm

As we just learned, NpmModuleRecord loads Lightning web components that are published in npm packages. Lightning web components are published to npm as source code. The consumer of the npm package must compile the components part of the package.

To distribute your own Lightning Web Components package via npm, explicitly define which components from your project to expose. Use the expose key in the lwc.config.json or package.json file.

{
    "modules": [
        {
            "dir": "src/modules"
        }
    ],
    "expose": ["ui/button", "ui/card", "ui/input", "ui/navfooter", "ui/output", "ui/select"]
}