fix: esm output's extension to .mjs

[syi0808]

What: Why: More Information: https://github.com/kentcdodds/kcd-scripts/pull/244

How: Change module field extension to .mjs and upgrade kcd-scripts after pr released.

screenshots

after this pr build output is below.

before change dist file and package.json

after change dist file and package.json

Checklist:

• [ ] Documentation added to the
• [ ] Tests
• [ ] TypeScript definitions updated
• [ ] Ready to be merged

Additional

I think according to https://github.com/kentcdodds/kcd-scripts/releases. We can skip breaking changes from 14, 15 versions. (v14 breaking change is about preact, v15 breaking change is about node v14)

Resolves: #1338 testing-library/user-event#1213

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 631747fdcb9a348eb8108151c3b9cb89fa29dff8:

Sandbox	Source
react-testing-library-examples	Configuration

[syi0808]

I don't know why formatting failed in workflow. In local, It passed. And Changes is not related to formatting.

[syi0808]

It's not clear from this issue why we need to do this. Do you have a minimal repro highlighting what this fixes?

Using .mjs instead of .js is not trivial since older build setups may stop recognizing these files as JS so there should be a justification for making that change.

To be honest, I can't logically explain why it's an issue. I just found out that if you have a .mjs extension or a package.json with type:module, this will fix it.

I checked by modifying node_modules myself, so I don't know how to share repro. Should I give it to you as a compressed file?

[syi0808]

Repro

Project

Archive.zip After decompressing, run npm i

testing library attached debug log

@testing-library.zip After decompressing, paste in node_modules

[syi0808]

And more detail. @eps1lon

Testing-library/user-event in ESM format was fetching testing-library/dom in CJS format. But testing-library/react before the extension changed was getting testing-library/dom in ESM format. After changing the extension, both are importing testing-library/dom in CJS format.

I'm not sure why you're looking for testing-library/dom in CJS format, but I think the current implementation is meaningful in unifying the different ways of working between the two libraries. I would like to think that this is a matter of node.

[syi0808]

Can we check it? @eps1lon @MatanBobi

[millerized]

Why: More Information: kentcdodds/kcd-scripts#244

It's not clear from this issue why we need to do this. Do you have a minimal repro highlighting what this fixes?

Using .mjs instead of .js is not trivial since older build setups may stop recognizing these files as JS so there should be a justification for making that change.

Hi @eps1lon! I believe there could be an issue with how the modules are being loaded based on ESM vs. CJS semantics. As mentioned in https://github.com/testing-library/react-testing-library/issues/1338 using latest Vitest, RTL, and userEvent together is "broken" and displaying errors in the console. We believe this is due to the userEvent APIs not being patched by RTL at runtime. When we debug this we find that identical esm/cjs modules are loaded and the incorrect one is monkey patched by RTL and this is why we see "not wrapped in act()" warnings.

I'm not exactly sure why @syi0808's change seems to fix this but if I had to guess it's the way that modules are loaded in node/vitest vs jest and this change makes things less ambiguous for non-jest runners. 🤷‍♂️