Is it not possible to use external es modules in spfx?

[rssilvaba]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version 97.0.4692.71
• SPFx version 1.13
• Node.js version 14.15

Issue description

I have a few libs created with webpack which all work well with sharepoint because I am bundling them as umd modules.

But I noticed that when I build it as es modules, I can still import and use them but SharePoint is giving the following error: "Uncaught SyntaxError: Unexpected token 'export'" as soon as I reference them as external packages.

And I think this is related to the way SPFX webpack config is run. Which expects the external packages to be umd, I assume that is the case because webpack can't refer to external es modules if the bundle itself is not a module. And as for SPFX is umd.

How can I extend the configuration to bundle my spfx as modules? So I can reference external dependencies as modules as well. I know this is a pretty advanced topic but I searched on the internet and I could not find any useful info. Any guidelines for that? Or are there plans to give us more control on the SPFX bundling step?

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[KevinTCoughlin]

@rssilvaba can you provide a sample solution that repros the interop issue I can clone to investigate further?

[rssilvaba]

Hi @KevinTCoughlin.

Here is a sample repository: https://github.com/rssilvaba/sample-esm --to build use: npx webpack --mode=production --node-env=production --env=publicPath="publicPath"

After adding the path to the externals and installing it locally:

//config.json
//...
externals: {
  "sample-esm/dist/main": "https://localhost:4321/node_modules/sample-esm/dist/main.js"
}
/...

--

package.json
//...
devDependencies: {
  "sample-esm": "file:../../sample-esm"
  }
//...

So if you for example create an app customizer and add the import (I can resolve the file)

When you try to use the following on the "onInit" method console.log(smallestNumber([1, 2]));

Here is what I see on the console:

Let me know if you need more details.

Update: I don't know if this issue is related on how spfx uses webpack or webpack itself. But if I dynamicaly import the module with webpack ignore comment. It works. What is funny is that the library is bundled with webpack too.

[KevinTCoughlin]

There appear to be two problems. First, the browser is failing to parse 'main.js' as ESM and is complaining about the token 'export'. That is why the module is not available via the console import(...).

A second potential problem is interop between ESM import and SPFx' commonjs once the above is resolved.

[AJIXuMuK]

@rssilvaba @KevinTCoughlin - just to sum up. Currently we don't support ESM modules. We're definitely looking into it, but there is no ETA as of now.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues