Vite build issue: "default" is not exported by "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js", imported by "node_modules/@testing-library/user-event/dist/esm/_interop/dtl.js"

[yannbf]

Storybook has a browser-compatible package @storybook/testing-library which encapsulates @testing-library/dom^9.0.0 and @testing-library/user-event@^14.0.0. A few hours ago there was a release of 14.5.0 which introduced a breaking change when building Vite applications that contained that new version. The issue is related to a default export that does not exist in @testing-library/dom, which is imported from @testing-library/user-event.

The issues were detected in a CI run that you can find here: https://app.circleci.com/pipelines/github/storybookjs/storybook/59307/workflows/7b75b77e-19a8-4b99-9fff-ea6516a48f33/jobs/577382/parallel-runs/32?filterBy=FAILED

Reproduction example

https://stackblitz.com/edit/github-thblwz?file=package.json&preset=node

p.s.: The reproduction has an overrides field to force the version of user-event, as I have released a fix (downgraded the user-event dependency version) to @storybook/testing-library

Prerequisites

1. Open stackblitz
   2.1 See a failure right away:

2.2 Or kill the process and run npm run build-storybook and see the failure

Actual behavior

"default" is not exported by "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js", imported by "node_modules/@testing-library/user-event/dist/esm/_interop/dtl.js".
file: /tmp/storybook/sandbox/vue3-vite-default-js/node_modules/@testing-library/user-event/dist/esm/_interop/dtl.js:2:7
1: import * as def from '@testing-library/dom';
2: import def__default from '@testing-library/dom';
          ^
3: 
4: var dtl = def__default !== null && def__default !== void 0 ? def__default : def;
RollupError: "default" is not exported by "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js", imported by "node_modules/@testing-library/user-event/dist/esm/_interop/dtl.js".
    at error (file://./node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at Module.error (file://./node_modules/rollup/dist/es/shared/node-entry.js:13740:16)
    at Module.traceVariable (file://./node_modules/rollup/dist/es/shared/node-entry.js:14170:29)
    at ModuleScope.findVariable (file://./node_modules/rollup/dist/es/shared/node-entry.js:12610:39)
    at Identifier.bind (file://./node_modules/rollup/dist/es/shared/node-entry.js:8319:40)
    at BinaryExpression.bind (file://./node_modules/rollup/dist/es/shared/node-entry.js:5892:23)
    at LogicalExpression.bind (file://./node_modules/rollup/dist/es/shared/node-entry.js:5892:23)
    at ConditionalExpression.bind (file://./node_modules/rollup/dist/es/shared/node-entry.js:5892:23)
    at VariableDeclarator.bind (file://./node_modules/rollup/dist/es/shared/node-entry.js:5892:23)
    at VariableDeclaration.bind (file://./node_modules/rollup/dist/es/shared/node-entry.js:5888:28)
    at Program.bind (file://./node_modules/rollup/dist/es/shared/node-entry.js:5888:28)
    at Module.bindReferences (file://./node_modules/rollup/dist/es/shared/node-entry.js:13736:18)
    at Graph.sortModules (file://./node_modules/rollup/dist/es/shared/node-entry.js:25848:20)
    at Graph.build (file://./node_modules/rollup/dist/es/shared/node-entry.js:25732:14)
    at async file://./node_modules/rollup/dist/es/shared/node-entry.js:26701:13
    at async catchUnfinishedHookActions (file://./node_modules/rollup/dist/es/shared/node-entry.js:25905:16)
    at async rollupInternal (file://./node_modules/rollup/dist/es/shared/node-entry.js:26696:5)
    at async Module.build (file://./node_modules/vite/dist/node/chunks/dep-df561101.js:48005:18)
    at async build (./node_modules/@storybook/builder-vite/dist/index.js:159:11024)
    at async Promise.all (index 0)
    at async Module.build2 (./node_modules/@storybook/builder-vite/dist/index.js:159:13356)
    at async Promise.all (index 0)
    at async buildStaticStandalone (./node_modules/@storybook/core-server/dist/index.js:97:4608)
    at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:101:4155)
    at async build (./node_modules/@storybook/cli/dist/generate.js:471:1059)
    at async Command.<anonymous> (./node_modules/@storybook/cli/dist/generate.js:474:125)

User-event version

14.5.0

[kentcdodds]

This looks like a bug in storybook.

[bryanjtc]

@kentcdodds I opened a pr that fixes this issue.

[yannbf]

This looks like a bug in storybook.

Thanks for checking this issue!

It might commonly happen in Storybook projects, as they use testing utilities that contain @testing-library/user-event, but it's definitely not a bug in Storybook. It happens when building projects with Vite, where Rollup tries to extract a default export from @testing-library/dom, however it does not exist. I am able to reproduce the same issue in a Vite project without Storybook.

[github-actions]

🎉 This issue has been resolved in version 14.5.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀