surajp / npm-to-lwc

A script to install any npm package as an LWC-ready static resource

Instantly install any npm package as an LWC-ready static resource

The only script you will ever need to use an npm package in LWC. This script faciliates installation, and ease of usage by removing ambiguities around how you would refer to the loaded modules in your LWC.

Important: The script does not magically make a library locker-service compatible. The library won't work correctly if it is not locker-service compatible.

Prerequisites

• Bash shell (with curl)
• NodeJS and NPM
• Salesforce CLI

Usage

Download the script and copy it to your sfdx project root folder. Run ./npmtolwc.sh <list of modules to include in your static resource> <optional flags>

./npmtolwc.sh without any arguments will show you the list of flags and usage instructions.

Examples

• Running ./npmtolwc.sh d3-scale,d3-time -s time will create a static resource file named time in your project's staticResources folder. The name of the library inside the static resource would be d3scale_d3time. After importing the resource in your LWC you can use the functions in d3-scale with the syntax d3scale_d3time.d3scale.<function name>

• Running ./npmtolwc.sh d3-scale,d3-time -s time -l timescale will create a static resource file named time in your project's staticresources folder. The name of the library inside the static resource would be timescale. After importing the resource in your LWC you can use the functions in d3-scale with the syntax timescale.d3scale.<function name>

Features

• A single command to convert any npm package to an LWC-ready static resource.
• Import multiple modules (related or unrelated) into a single static resource file.
• Clear instructions on how to refer to the module(s) in your LWC once loaded.

The script might take a bit longer to run the first time as it downloads webpack and other dependencies.

npm-to-lwc's Issues

Error in bundle.js

Is it normal to get these errors?

ERROR in bundle.js from Terser
Error: error:0308010C:digital envelope routines::unsupported
   at new Hash (node:internal/crypto/hash:69:19)
   at Object.createHash (node:crypto:138:10)
   at <LocalPath>/node_modules/terser-webpack-plugin/dist/index.js:217:37
   at Array.forEach (<anonymous>)
   at TerserPlugin.optimizeFn (<LocalPath>/node_modules/terser-webpack-plugin/dist/index.js:160:259)
   at AsyncSeriesHook.eval [as callAsync] (eval at create (<LocalPath>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
   at AsyncSeriesHook.lazyCompileHook (<LocalPath>/node_modules/tapable/lib/Hook.js:154:20)
   at <LocalPath>/node_modules/webpack/lib/Compilation.js:1409:36
   at AsyncSeriesHook.eval [as callAsync] (eval at create (<LocalPath>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
   at AsyncSeriesHook.lazyCompileHook (<LocalPath>/node_modules/tapable/lib/Hook.js:154:20)
   at <LocalPath>/node_modules/webpack/lib/Compilation.js:1405:32
   at AsyncSeriesHook.eval [as callAsync] (eval at create (<LocalPath>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
   at AsyncSeriesHook.lazyCompileHook (<LocalPath>/node_modules/tapable/lib/Hook.js:154:20)
   at Compilation.seal (<LocalPath>/node_modules/webpack/lib/Compilation.js:1342:27)
   at <LocalPath>/node_modules/webpack/lib/Compiler.js:675:18
   at <LocalPath>/node_modules/webpack/lib/Compilation.js:1261:4

Also when running bash ./npmtolwc.sh d3-scale,d3-time -s time I don't see staticresources folder getting populated?

Not able to create static resource for xml2js

Hi @surajp I am trying to install xml2js library to create static reasource for my project sinse I couldn't find exact lib file for xml2js.
but I am facing this error

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

can you please provide your help to understand what's the exact issue is?

This script is not running on Windows bash shell with '-' swtch.

The script requires the switch '-p, -l, -s'. However when we run this script, it see the - and display the usage message.

Not able to access module

Hi, I tried the script with the library "angular-expressions". After importing the static resource and doing loadScript, I added a debugger statement.
If I do console.log(window.angularexpressions), it is undefined. But all other objects are logged in the console.

Is it because angularexpressions is a module? And if so how do I access/import(?) it? AFAIK dynamic imports in LWC are not supported...

Silly me.. I was trying to access angularExpressions this whole time.