storybook: [Bug]: `play` function does not work in stories built for Production

Describe the bug

I build storybook with build-storybook command.

$ npm run build-storybook

> xxx@0.1.0 build-storybook
> build-storybook

info @storybook/react v6.5.12
info 
info => Cleaning outputDir: /Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
92% sealing asset processing TerserPlugininfo => Manager built (13 s)
info => Preview built (28 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   807.3ba8e026.iframe.bundle.js (792 KiB)
WARN   721.a140354b.iframe.bundle.js (6.69 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (6.93 MiB)
WARN       runtime~main.9147eaa6.iframe.bundle.js
WARN       721.a140354b.iframe.bundle.js
WARN       main.17af0170.iframe.bundle.js
WARN 
info => Output directory: /Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static

When I open a stories that implements the play function in a browser, I get the following error.

act(...) is not supported in production builds of React.
Error: act(...) is not supported in production builds of React.
    at exports.unstable_act (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/721.a140354b.iframe.bundle.js:2:6483330)
    at file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/721.a140354b.iframe.bundle.js:2:4428150
    at Object.eventWrapper (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/721.a140354b.iframe.bundle.js:2:4430316)
    at fireEvent (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/721.a140354b.iframe.bundle.js:2:4716076)
    at Object.keys.forEach.fireEvent.<computed> [as pointerOver] (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/721.a140354b.iframe.bundle.js:2:4719213)
    at hover (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/721.a140354b.iframe.bundle.js:2:4893126)
    at Object.click (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/721.a140354b.iframe.bundle.js:2:4889059)
    at _callee$ (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/main.17af0170.iframe.bundle.js:2:171469)
    at tryCatch (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/main.17af0170.iframe.bundle.js:2:160899)
    at Generator._invoke (file:///Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static/main.17af0170.iframe.bundle.js:2:160522)

I build storybook with NODE_ENV=development,

$ NODE_ENV=development npm run build-storybook
> xxxt@0.1.0 build-storybook
> NODE_ENV=development build-storybook

info @storybook/react v6.5.12
info 
info => Cleaning outputDir: /Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
92% sealing asset processing TerserPlugininfo => Manager built (14 s)
WARN DefinePlugin
WARN Conflicting values for 'process.env.NODE_ENV'
info => Preview built (30 s)
WARN DefinePlugin
WARN Conflicting values for 'process.env.NODE_ENV'
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   807.3ba8e026.iframe.bundle.js (792 KiB)
WARN   721.c956dec1.iframe.bundle.js (7.31 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (7.56 MiB)
WARN       runtime~main.229412ac.iframe.bundle.js
WARN       721.c956dec1.iframe.bundle.js
WARN       main.36f20661.iframe.bundle.js
WARN 
info => Output directory: /Users/shigetaka-shirouchi/dev/ghq/github.com/organization/project/storybook-static

This is work fine. スクリーンショット 2022-11-05 19 01 24

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.9.0 - /opt/homebrew/bin/node
    npm: 8.19.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Safari: 16.0
  npmPackages:
    @storybook/addon-actions: ^6.5.12 => 6.5.12 
    @storybook/addon-essentials: ^6.4.22 => 6.5.12 
    @storybook/addon-interactions: ^6.5.12 => 6.5.12 
    @storybook/addon-links: ^6.5.12 => 6.5.12 
    @storybook/builder-webpack5: ^6.5.12 => 6.5.12 
    @storybook/jest: ^0.0.10 => 0.0.10 
    @storybook/manager-webpack5: ^6.5.12 => 6.5.12 
    @storybook/react: ^6.1.21 => 6.5.12 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/testing-react: ^1.3.0 => 1.3.0

Additional context

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 19 (2 by maintainers)

Most upvoted comments

I had the exact same problem, and found out it was because I had a story importing something from my test-utils file, which contains this line :

export * from '@testing-library/react'

This file is where I define a custom render function for my component tests with React Testing Library, and acts as a wrapper for ‘@testing-library/react’. The fix was to move out the util function I needed to another file.

I guess there is a conflict between ‘@testing-library/react’ and ‘@storybook/testing-library’. Make sure only ‘@storybook/testing-library’ is pulled in your stories.

Note that the issue only happens when using userEvent actions (clicks) in your play functions. No problem if you are just waiting for an element to display.

+5
Mattgic on Apr 5, 2023

Im struggling with this one too… I’ve made sure all packages are on the same version (6.5.10 for me) and @storybook/testing-library is uptodate (0.0.13).

Also userEvent is imported from @storybook/testing-library in the story.

Not sure what’s going on…

Did you guy solve it by building storybook in development mode?

+2
foxaltus on May 24, 2023

I really can’t make this work 😦 I even removed the @testing-library/user-event package from my dependencies and deleted all the tests that imported it.

Also updated all storybook packages to 6.5.15, no luck

+1
foxaltus on May 24, 2023
Read more comments on GitHub
← storybook: [Bug]: Opening storybook-static/index.html in browser does not work anymore in v7
storybook: [Bug]: react-vite, Failed to fetch dynamically imported module →