4

I think the documentation completely misses the case when you want to import an extra es6 module from another component bundle. Example, suppose we have the following folder structure.

  • lwc
    • module1
    • module1.html
    • module1.js
    • module1-extra.js
  • module2
    • module2.html
    • module2.js

How to import module1-extra.js into module2.js ?

I tried

import {class1] from 'c/module1'

import {class1] from 'c/module1/module1-extra'

both aproaches failed.

3

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';
2
  • It is a little maintenance burden, but it gets the job done. Thank you.
    – alcoforado
    Apr 10 '19 at 15:35
  • This solution made us debug for a day. This breaks some internal things inside LWC, probably because the component js files (module1.js) are already exporting their class as default and this is where things get messed up. We figured this out because we tried to handle an input change event and the target and currentTarget were not directing us to the input, but the target pointed to the component module1 and currentTarget was even undefined. Don't ask me about the details, but this workaround seems to be unstable.
    – Basti
    Jul 1 at 15:44
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.