Import Luxon into LWC

Question

I am trying to use Luxon in a LWC.

I believe I am messing up the syntax of the decomposition of DateTime from the library.

Following the documentation: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_third_party_library

My Steps

I started by downloading Luxon from GitHub: https://github.com/moment/luxon

I extracted luxon-master.zip and rezipped the /src directory.

I renamed the .zip "luxon". I uploaded this to static resources as "Luxon".

My Import:

import DateTime from '@salesforce/resourceUrl/Luxon';
import {loadScript} from 'lightning/platformResourceLoader';

renderedCallback()

renderedCallback() {
    loadScript(this, DateTime + '/luxon.js')
.then(() => { /* callback */ });
}

Use Luxon DateTime

get luxonDate() {
    return DateTime.now().toISO();
}

Answer 1

As an import, you need to attach Luxon to the window element to get it. Change the very first part from:

var luxon = ... 

To:

window.luxon = ...

Or, alternatively, you can add a line at the end:

window.luxon = luxon

Next, you need to reference it in your code, so:

return luxon.DateTime.now().toISO();

---

You can also convert this script to a "native" ES6 script.

Instead of attaching luxon to window, create a new LWC called luxon, delete the .html file, copy the luxon source to the .js file, and add this as the very last line:

const DateTime = luxon.DateTime;
export { DateTime };

Then you can use it in your script directly:

import { DateTime } from 'c/luxon';

...

return DateTime.now().toISO();

Functional Example

You can also choose to export luxon, and use it as above (e.g. luxon.DateTime...) or each individual part that you need.

---

Edit: I also see that they have an ES6 module. This would be a copy-paste scenario, you can use it verbatim with no modifications.

---

Edit 2: As noted in a comment, this trick only works if the file can be minified to 128KiB (131,072) characters long.