[Bug]: No matching export in "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js" for import "default"

[InsightStevenGreen]

Describe the bug

Storybook v7.4.1 starts but then throws the following build error, No matching export in "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js" for import "default"

To Reproduce

Windows 11 NodeJS v18.12.1

Setup a fresh ViteJS React TS environment, setup Storybook with the following commands npx sb init --builder @storybook/builder-vite npm run storybook

package.json below:

{ "name": "vite-project", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.67.0" }, "devDependencies": { "@storybook/addon-essentials": "^7.4.1", "@storybook/addon-interactions": "^7.4.1", "@storybook/addon-links": "^7.4.1", "@storybook/addon-onboarding": "^1.0.8", "@storybook/blocks": "^7.4.1", "@storybook/react": "^7.4.1", "@storybook/react-vite": "^7.4.1", "@storybook/testing-library": "^0.2.0", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", "eslint-plugin-storybook": "^0.6.13", "storybook": "^7.4.1", "typescript": "^5.0.2", "vite": "^4.4.5" } }

System

Running Storybook

> vite-project@0.0.0 storybook
> storybook dev -p 6006 --initial-path=/onboarding --quiet

@storybook/cli v7.4.1

info => Starting manager..
X [ERROR] No matching export in "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js" for import "default"

    node_modules/@testing-library/user-event/dist/esm/_interop/dtl.js:2:7:
      2 │ import def__default from '@testing-library/dom';
        ╵        ~~~~~~~~~~~~

C:\Development\Learning\react-ts-form-components\node_modules\@storybook\cli\bin\index.js:23
  throw error;
  ^

Error: Build failed with 1 error:
node_modules/@testing-library/user-event/dist/esm/_interop/dtl.js:2:7: ERROR: No matching export in "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js" for import "default"
    at failureErrorWithLog (C:\Development\Learning\react-ts-form-components\node_modules\esbuild\lib\main.js:1649:15)
    at C:\Development\Learning\react-ts-form-components\node_modules\esbuild\lib\main.js:1058:25
    at C:\Development\Learning\react-ts-form-components\node_modules\esbuild\lib\main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/@testing-library/user-event/dist/esm/_interop/dtl.js',
        length: 12,
        line: 2,
        lineText: "import def__default from '@testing-library/dom';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No matching export in "node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js" for import "default"'
    }
  ],
  warnings: []
}

Node.js v18.12.1

Additional context

No response

[D1no]

Same. Have a vanilla vite react app, adding storybook, trying to run it — same error as above. npm create vite@latest myapp -- --template react-ts-swc cd myapp npx storybook@latest init or npx storybook@next init

Does the chromatic team actually bother with end-to-end / integration testing to validate their promised supports (like vite and react here)? Every time I am required to touch / add storybook to a project, it turns into a 1.7k open issue big major pain in the a$$.

[InsightStevenGreen]

As a test I uninstalled "@storybook/testing-library": "^0.2.0" and commented out the LoggedIn Story function in the Page.stories.ts and this stopped the error. But if you require testing-library this is not really an option.

This is more likely an issue or change in testing-library that is affecting storybooks ability to run.

[il-1337]

This appears to be caused by the release of version 14.5.0 of @testing-library/user-event a few hours ago. If you are using pnpm, you can add the following to your package.json:

"pnpm": {
    "overrides": {
      "@testing-library/user-event": "14.4.3"
    }
  }

[InsightStevenGreen]

I can confirm at least for Vite and React TS, downgrading testing-library/user-event to 14.4.3 does fix the problem until a bug fix is released. Nice work @il-1337.

Added this override to the package.json and uninstalled and reinstalled @testing-library/user-event.

"overrides": { "@testing-library/user-event": "14.4.3" }

[valentinpalkovic]

@yannbf I think we have resolved this one?