Standalone javascript file static resources not imported correctly

[grekker]

Ran across an issue with static resources that are standalone javascript files.

This code fails in local development:

import jsResource from '@salesforce/resourceUrl/myFile';
import {loadScript} from 'lightning/platformResourceLoader';
// -- snip ---
// inside connectedCallback
loadScript(this, jsResource);

With this error:

Error: Route must be specified
    at Object.assert (/Users/me/.local/share/sfdx/node_modules/@webruntime/compiler/dist/commonjs/utils/assert.js:6:15)
    at generateHTML (/Users/me/.local/share/sfdx/node_modules/@webruntime/compiler/dist/commonjs/document/document-service.js:48:14)
    at /Users/me/.local/share/sfdx/node_modules/@webruntime/compiler/dist/commonjs/server/template-middleware.js:34:32
    at Layer.handle [as handle_request] (/Users/me/.local/share/sfdx/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/me/.local/share/sfdx/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/me/.local/share/sfdx/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/me/.local/share/sfdx/node_modules/express/lib/router/layer.js:95:5)
    at /Users/me/.local/share/sfdx/node_modules/express/lib/router/index.js:281:22
    at param (/Users/me/.local/share/sfdx/node_modules/express/lib/router/index.js:354:14)
    at param (/Users/me/.local/share/sfdx/node_modules/express/lib/router/index.js:365:14)

The same code works fine in a real org.

A workaround is to add ".js" to the end of the import, like so:

loadScript(this, jsResource + '.js');

However, this workaround then breaks the code on the real org.

So you can have it one way, or the other.

Other workarounds are things like using a static resource zip file instead of a standalone file, or detecting that you are in local dev mode and injecting the suffix or not.

[cesarlarsson]

Have the same issue. I can see that on the .localdevserver/public/assets/ the resource but the problem is like in the way to find this by the bundle generator.

[KrisGraySFDC]

Thank you for reporting. We've filed a work record for this: W-7148241

We'll update as we pick up the work.

[juvian]

I get same error stacktrace when trying to get sobject info: [HPM] GET /api/services/data/v48.0/ui-api/object-info/Item__c ~> https://na39.salesforce.com Error: Route must be specified...

Works fine in real org

[ChristianUlbrich]

The problem seems to be somewhat related to file endings... and the mime type. However with:

• force-app/main/default/staticresources/jszip.js
• force-app/main/default/staticresources/jszip.resource-meta.xml

The following code works locally:

import { LightningElement } from "lwc";
import jszip from "@salesforce/resourceUrl/jszip";
import { loadScript } from "lightning/platformResourceLoader";

export default class StaticTest extends LightningElement {
  connectedCallback() {
    console.log("jsZip? ", jszip);
    loadScript(this, jszip ).then(() => {
      console.log("Script loadedz...");
    });
  }
}

I have yet to test it on the real org (deploying works) - so the problem was the missing .js extension for the local file.

[wwwmonkey]

Noticed there is a message during lds bundling that could be related: [0] [rollup] Creating a browser bundle that depends on Node.js built-in module ('assert'). You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins

[mysticflute]

For standalone files like this, the local development server will work as long as you have a matching .resource-meta.xml file that specifies a recognized mime-type.

For example, with your import of import jsResource from '@salesforce/resourceUrl/myFile'; then there should be a file myFile.resource-meta.xml, under the same directory as the static asset, with contents similar to this:

<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Private</cacheControl>
    <contentType>application/javascript</contentType>
</StaticResource>

In this case it will automatically serve the .js file when you send a request without the extension, the same way it should work in core. You should not have to manually add the extension just for local development. You will need to restart the server after adding this file currently. If you try this and it doesn't work please let us know, thanks.

[mysticflute]

@juvian unfortunately Error: Route must be specified is a generic error that doesn't really explain what the issue is. You might be running into something else. This lack of error detail will be fixed in an upcoming update...

If you still see this problem please file a new issue with the details of your ui-api call and we'll take a look.

[juvian]

@mysticflute if I add the package prefix to the import, then the network call from localhost works: import Item_OBJECT from '@salesforce/schema/mlsalesItemc'; However if I try to push this to org, it won't let me:

force-app\main\default\lwc\lwcInputBuyBoxItem\lwcInputBuyBoxItem.js LWC1504: Invalid module id "mlsalesItemc" for type "schema". Explicit use of namespace "mlsales" in file "lwcInputBuyBoxItem.js" is prohibited. Use default namespace "c" instead.

So I either make it work for localhost by adding prefix or I don't add prefix and it will work in real org but not in localhost. I can switch it for testing but would be great if it worked for both

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. Currently, there is not enough information provided for us to take action. Please reply and reopen this issue if you need additional assistance.

[edmondop]

@grekker does the workaround break on prod?

[aranwe]

@edmondo1984 (and anyone who may come to this bug) - yes it breaks in any org :/

[nathanvoller]

For anyone else coming to this issue, @mysticflute's answer helped me but I had to change the MIME type of the static resource from text/javascript to application/javascript to get this to work correctly in the local dev server.