ES module format (ESM)

[eshlox]

I want to import a package provided as ESM. Let's take @shoelace-style/react as an example.

By default, when I want to import this package in Docusaurus 2 project, I get this error:

Module not found: Error: Can't resolve '@lit-labs/react' in '/Users/eshlox/projects/docusaurus-esm-test/node_modules/@shoelace-style/react/dist/button'
Module not found: Error: Can't resolve '@shoelace-style/shoelace/dist/components/button/button' in '/Users/eshlox/projects/docusaurus-esm-test/node_modules/@shoelace-style/react/dist/button'
Did you mean 'button.js'?
BREAKING CHANGE: The request '@shoelace-style/shoelace/dist/components/button/button' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I found a way to solve the "BREAKING CHANGE" issue by creating a plugin.

module.exports = function (context, options) {
  return {
    name: "esm-docusaurus-plugin",
    configureWebpack(config, isServer, utils) {
      return {
        module: {
          rules: [
            {
              test: /\.m?js$/,
              resolve: {
                fullySpecified: false,
              },
            },
          ],
        },
      };
    },
  };
};

The problem I can't solve is that it can't resolve dependencies.

Module not found: Error: Can't resolve '@lit-labs/react' in '/Users/eshlox/projects/docusaurus-esm-test/node_modules/@shoelace-style/react/dist/button'

It's probably Babel/Webpack configuration issue but I don't know how to fix that. Any ideas?

I created a sample repository: https://github.com/eshlox/docusaurus-esm-test

[slorber]

Have you tried any other lib?

https://unpkg.com/browse/@shoelace-style/react@2.0.0-beta.40/dist/

dist/index.js does not even exist, not sure this lib is going the right thing by asking users to import from dist/button

The problem with libraries in ESM is that you also have to setup webpack/babel so that they get transpiled. We have an internal "LibrariesToTranspile" array for such cases but no API to add the ability to add extra libraries.

[eshlox]

I used Shoelace as an example because I also create web components as ESM and they also don't work. The repository is not public yet but I have dist/index.js.

This is definitely a Babel/Webpack issue. I'm using both libraries without any issues with create-react-app project (without any additional configuration), NextJS (with https://github.com/martpie/next-transpile-modules) and Storybook.

What's interesting, I can import a package provided as ESM. The issue is that it can't resolve the @lit-labs/react dependency of the package. When I remove @lit-labs/react, it works (not completely, but there is no problem with import). I tried to add @lit-labs/react to LibrariesToTranspile as a test but the module path is not passed to excludeJS.

I will come back to it when I have more time.

[slorber]

I tried to add @lit-labs/react to LibrariesToTranspile as a test but the module path is not passed to excludeJS.

That is very surprising.

We have a new Webpack 5 caching system in place, maybe try yarn docusaurus clear ?