How to resolve error LWC1513: @salesforce/resourceUrl modules only support default imports?

Question

I’m using Salesforce CLI with Visual Code IDE. I imported a 3rd party library to the scratch orgs static resources. Then I ran the sfdx:source: pull command to pull it into my Visual Code project. I created an LWC component that imports the 3rd party library from static resources.

import { Config } from ‘@salesforce/resourceUrl/my3rdPartyModule/directoryName/index.js’

When I attempt to push the new component to the scratch org, I encounter the following error:

LWC1513: @salesforce/resourceUrl modules only support default imports.

What does the error mean? Is there a solution for this?

Answer 1

You seem to have incorrect syntax for importing the static resource in the JS. The approach for using 3rd party resource is to upload the static resource and then import it in your JS as below.

Import the Static Resource:

import resourceName from '@salesforce/resourceUrl/resourceName';

And then utilize loadStyle and loadScript to load those resources (JS and CSS) from lightning/platformResourceLoader:

import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

Promise.all([
        loadScript(this, resourceName + '/xxx.js'),
        loadStyle(this, resourceName + '/xxx.css'),
])

Refer to the documentation for more details on the syntax and details.