0

Example

There are 3 .js scripts / files as a static resource.

First.js

Second.js

CommonVars.js

I am doing something like this in CommonVars.js

CommonVars.js

var myCommonVars = {
 NAME : 'STACK',
 LASTNAME : 'EXCHANGE',
 WORK : 'COOL WORK'
}
 export { myCommonVars };

First.js

 import {myCommonVars} from './CommonVars.js';
 alert( myCommonVars.NAME );              

Second.js

 import {myCommonVars} from './CommonVars.js';
 alert( myCommonVars.NAME );

On a load of the script of file they are giving me error as :

 cannot use import statement outside a module salesforce

What should I do? Can I use this way to use common variables or what can be the way to keep some common attributes/properties in a separate .js file?

1
  • If you want to use import/export statements, you can write a service component.
    – sfdcfox
    Aug 12, 2021 at 15:03

2 Answers 2

1

In your JS file, just define whatever you'd like:

var myCommonVars = {
 NAME : 'STACK',
 LASTNAME : 'EXCHANGE',
 WORK : 'COOL WORK'
}

It's pretty typical to attach such variables to window:

window.myCommonVars = {
 NAME : 'STACK',
 LASTNAME : 'EXCHANGE',
 WORK : 'COOL WORK'
}

Then, in your code, you can access it directly:

import MYJSFILE from '@salesforce/resourceUrl/myJsFile';

...

connectedCallback() {
  loadScript(this, MYJSFILE).then(
    () => console.log(myCommonVars.NAME)
  }
}
0

If your use-case is to use these static resources with ES6 modules in Visualforce, then this GitHub Repo should help you. Based on this repo, here is how your use case would look like

CommonVars.js remains the same. First.js can be refactored to

import { myCommonVars } from './CommonVars.js';

export function showAlert(){
    alert(myCommonVars.NAME);
};   

and then here is how you use these static resources in VF.

<apex:page>
    
  <script type="module">
      import { showAlert } from '{!URLFOR($Resource.STATICRESOURCE, 'first.js')}';
       
      showAlert();
  </script>
 
</apex:page>

If you want to achieve the same using LWC, you can either do what @sfdcfox suggested, or you can create a web component with just the JS file, which holds the functions, variables that you want to reuse.

service.js

export const myCommonVars = {
    NAME : 'STACK',
    LASTNAME : 'EXCHANGE',
    WORK : 'COOL WORK'
};

You can import this file into any other LWC. For example AnotherComponent.js

import { LightningElement } from 'lwc';

import { myCommonVars } from  'c/service';

export default class AnotherComponent extends LightningElement {
    
    connectedCallback(){
        console.log(myCommonVars);
    }
}
3
  • Yes , But These are not web components. These are .js files or scripts stored in salesforce Static Resources. That's the point of concern. Aug 12, 2021 at 13:12
  • Do you want to use these static resources in LWC? Aug 12, 2021 at 13:18
  • @VivekMakkar I've edited the answer to better address your question. Please let me know if it helps or if you need more details. Aug 12, 2021 at 14:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .