Proper namespace syntax for importing static resource into LWC?

Question

I have a static resource named 'myResource' that contains a javascript file 'myfile.js'

I can correctly import like this: import myResource from '@salesforce/resourceUrl/myResource';

Then when I package this component, install in another org, and access it the resource is not found. I assume it is a namespace issue.

So then in my scratch org I am developing in I try

import myResource from '@salesforce/resourceUrl/namespace__myResource';

Then I get Explicit use of namespace "namespace" in file "myComponent.js" is prohibited. Use default namespace "c" instead.

Ok, so now I try c__myResource , but that gives me: Invalid reference c__myResource of type resourceUrl in file myComponent.js when I try to push. And trying c/myResource gives a similar error.

How are you supposed to namespace your static resource access in an LWC when it apparently requires it to access it in an org that installs your managed package?

Answer 1

If you have a need to import an additional JavaScript file as part of a specific LWC component that you don't need to use outside that component, the correct approach is to put that script in the component's folder, or a sub-folder thereof, and to load it using a relative path.

For example, I can have a component "valueProvider" that has various different implementations in a sub-folder called "providers":

force-app/default/main/lwc/valueProvider/valueProvider.js
force-app/default/main/lwc/valueProvider/providers/literalValueProvider.js
...

Now, the valueProvider component imports the JavaScript file(s) thus:

import {LiteralValueProvider} from './providers/literalValueProvider';

Usage thereafter is via the import name (here "LiteralValueProvider").

On the other hand, if you have a static resource containing JavaScript that is used within your managed package but also designed to be accessed from outside the managed package, with Winter '20 at least, then the static resource must be imported without namespace prefix the the package code, but to load the JavaScript you have to use "loadScript", as covered in the Salesforce documentation.

An example, where I have a JavaScript file called "pubsub.js" as a static resource in the package:

import {loadScript} from 'lightning/platformResourceLoader';
import pubsubDefinition from '@salesforce/resourceUrl/pubsub';

Note that the script import actually provides a generated URL.

Usage is then like:

loadScript(this, pubsubDefinition).then(() => {
    // The script is loaded and the function(s) in it are now available
    // They are referenced by literal name, so if the file has a function
    // called "publish" then you call it with a parameter via "publish(param);"
    // as normal
}).catch(error => {
    // Something went wrong
});

To use the static resource from an LWC that is outside the package, I found the following worked (when I wrote the code in November last year - I don't know if the latest platform release has changed the behaviour):

import {loadScript} from 'lightning/platformResourceLoader';
import pubsubDefinition from '@salesforce/resourceUrl/thenamespace__pubsub';

Usage is identical to the in-package version (only the import changed, with the namespace prefix). The functions are exposed and invoked just the same - no namespace prefix applies to the functions from the static resource.

Answer 2

I am facing the same issue. LWC is in the managed package, the package is unable to load script and style sheet.

I am not able to save the LWC with a managed package.

Explicit use of namespace "XYZ" in file "XYZ.js" is prohibited. Use default namespace "c" instead."

Answer 3

Invalid reference c__myResource of type resourceUrl in file myComponent.js says that it can find this resource in your local project. Are you sure you have myResource in your local project?

I don't use a namespace and create a package without issues.