It depends on what environment you're running in. In a web browser you simply need to make sure that file1.js is loaded before file2.js:
<script src="file1.js"></script>
<script src="file2.js"></script>
In node.js, the recommended way is to make file1 a module then you can load it with the require function:
require('path/to/file1.js');
It's also possible to use node's module style in HTML using the require.js library.
Answer from slebetman on Stack OverflowIt depends on what environment you're running in. In a web browser you simply need to make sure that file1.js is loaded before file2.js:
<script src="file1.js"></script>
<script src="file2.js"></script>
In node.js, the recommended way is to make file1 a module then you can load it with the require function:
require('path/to/file1.js');
It's also possible to use node's module style in HTML using the require.js library.
// Create Customer class as follows:
export default class Customer {
getName() {
return 'stackoverflow';
}
}
// Import the class
// no need for .js extension in path cos it gets inferred automatically
import Customer from './path/to/Customer';
// OR
const Customer = require('./path/to/Customer')
// Use the class
var customer = new Customer();
var name = customer.getName();
javascript - Include es6 class from external file in Node.js - Stack Overflow
Correct way to use ES6 modules and import classes
Including JavaScript class definition from another file in Node.js - Stack Overflow
javascript - How to import a JS file in another JS file in ES6? - Stack Overflow
Videos
Either do
module.exports = class MyClass {
constructor(arg){
console.log(arg);
}
};
and import with
var a = require("./class.js");
new a("fooBar");
or use the newish syntax (may require you to babelify your code first)
export class MyClass {
constructor(arg){
console.log(arg);
}
};
and import with
import {myClass} from "./class.js";
export default class myClass {
constructor(arg){
console.log(arg);
}
}
Other file:
import myClass from './myFile';
You can simply do this:
user.js
class User {
//...
}
module.exports = User // Export class
server.js
const User = require('./user.js')
let user = new User()
This is called CommonJS module.
ES Modules
Since Node.js version 14 it's possible to use ES Modules with CommonJS. Read more about it in the ESM documentation.
user.mjs ( extension is important)
export default class User {}
server.mjs
import User from './user.mjs'
let user = new User()
Using ES6, you can have user.js:
export default class User {
constructor() {
...
}
}
And then use it in server.js
const User = require('./user.js').default;
const user = new User();
On the Salesforce platform, you can't import a specific file from another module. You can only import the entry file.
If you want module2.js to import some value exported by module1-extra.js this value has to be re-exported in the module entry point.
// module2.js
import { foo } from 'c/module1';
// module1.js
export { foo } from './module1-extra';
// module1-extra.js
export const foo = 'bar';
We came across this question as well and solved it a couple of months ago with pmdartus' answer. Meanwhile, we were stuck in debugging because our component started behaving oddly. I will not go into detail here, but the outcome was, that in the background, the export { foo } solution seems to break the export default class used by the LWC compiler.
So if you export anything inside your component except the LightningElement implementation, you will run into an error. In production, this error is hidden and only certain things go wrong, so probably you won't even notice. (You might for example experience broken "target" references inside your event handlers.)
But in a local dev environment, the component never loads and throws this exception in the console:
Uncaught (in promise) Error: Invalid LWC Constructor [object Object] for custom element .
Technically multiple exports next to the default should be absolutely valid, but somehow the LWC-Compiler cannot handle it. If anyone has a deeper understanding or is willing to dive into the lwc repos, please contribute your knowledge, I am curious.
Back to the question
The most accurate and recommended solution from salesforce is, create a UI-less LWC component for your shared file. You might argue, that your exported file belongs to this component and should be stored next to it, in this case maybe question yourself, why you would want to expose it then?
This is the official documentation to Share JavaScript Code, where et the end of the document exports also are passed through multiple files as suggested in the previous answer but be aware, that they are not passing things through a UI component, but just through another utils file.
You are using a default export, so with a namespace import (* as User) you'd have to use User.default to access the class.
Instead, use a default import:
import User from './../user/User';
However, your screenshot suggests that you're actually doing a named export with export class User { … }, not a default export. If you want to use that, you'd have to import the name:
import {User} from './../user/User'; // short for {User as User}
That said, you probably shouldn't be using a class consisting of only static methods anyway. Use multiple named exports
export function logIn(token) {
}
export function logOut(token) {
}
export function isAuthorized() {
}
and then use the namespace import
import * as User from './../user/User';
to access them as User.logIn etc.
Since you are using a default export, there is no need to specify an alias via as.
Instead, use the following syntax to import the default export of the module:
import User from './../user/User';
More info in the MDN docs.