ESM export?

[vlaraort]

Issue

I am trying to try this awesome library in my project, but I just found that it cannot be imported as a ESM module from my test files.

I am using web-test-runner (https://modern-web.dev/docs/test-runner/writing-tests/js-tests/) to run my tests, and as you can see, ESM imports are necesary, but it doesn't support TS or require/AMD exports

Would be possible to build the project allowing to do imports from JS files, like it's in TS?

Thanks!

[vlaraort]

I have tried to build the project for esnext but I have some problems into some dependencies. If you want I can provide a sample project to debug, logs or what you need :)

[cmorten]

Hey @vlaraort 👋

The ask is straight-forward enough so should be reasonable to do.

Some thought needed as to the best approach as there are a few approaches, e.g. using .cjs and .mjs vs 2 package.json alternatives.

In the meantime you might be able to unblock yourself by using the likes of https://jspm.org/, https://esm.sh/, or https://jsr.io/

[vlaraort]

I don't think you need two package.json, only ship two builds in the same package, and use this approach

https://antfu.me/posts/publish-esm-and-cjs

I will check in the meantime the solutions you provide, thanks for the quick response and the effort of this library! I think it's a awesome solution for having regression testing on accessibility, and it's something really needed in this times to aware about a11y ;)

[cmorten]

Yep that’s the first (and newer) approach where you ship different extensions and utilise the newish exports field 😊

Prior that existing, the only option was to publish two packages, one with type:module.

Not sure what the tradeoffs are of the two approaches, but suspect the more modern approach is the way to go.

[cmorten]

Hi @vlaraort 👋

I’ve hopefully now updated the package to dual support CJS and ESM. Please could you try with 0.18.0?

[vlaraort]

I tried, thanks!

I received the following error and it crashes, I am going to check that dependency to see if this can be fixed :)

[vlaraort]

In fact, here are some information regarding the same dependency, in the same library

A11yance/aria-query#48

[cmorten]

I tried, thanks!

I received the following error and it crashes, I am going to check that dependency to see if this can be fixed :)

Ah apologies, I should have tested more thoroughly 🤦

I’ll take a look as to whether there is anything I can do in this package to work around the issue, otherwise I guess we ask the question again on the aria-query thread!

[vlaraort]

Looks like they don't really want to provide a ESM export because reasons

A11yance/aria-query#485

But, there is a fork that makes the ESM build, maybe we can try with this fork of aria-roles instead?

https://github.com/KonnorRogers/aria-query/tree/konnorrogers/publish-modern-build

[vlaraort]

I have been playing around with the dependencies, making overrides from aria-roles to aria-roles-esm, and it's not the only dependency that causes problems in a ESM build. I also hit the wall with lz-string, that doesn't like that is going to work, so looks like it would be more difficult than assumed.

The only solution that comes to my mind (and I don't like too much), is to create a webpack/rollup/whatever bundle with all the dependencies embeed, so they are also processed and converted to ESM code. WDYT?

[cmorten]

See also testing-library/dom-testing-library#995 it looks like this has been raised before, but the issue was quite muddled and closed based on a change that doesn’t quite go the whole way.

Maybe worth raising an issue on Testing Library to see what appetite would be?

Alternatively there are some comments that suggest you can use a commonjs Rollup plugin within the web-test-runner config that might help compile for ESM?

In the meantime using the likes of https://esm.sh/@guidepup/virtual-screen-reader@0.19.0 as mentioned before might be the way to go for now.