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

shgtkshruch · 2022-11-05T10:04:25Z

Describe the bug

I build storybook with build-storybook command.

$ npm run build-storybook

> [email protected] 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
> [email protected] 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.

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

The text was updated successfully, but these errors were encountered:

jtbandes · 2022-12-17T02:54:13Z

~~I'm having this problem too: storybook, code, build step. Is there any advice or known workaround?~~

Edit: never mind, it was fixed by ensuring the version of all storybook packages match.

shilman · 2022-12-18T07:35:19Z

@shgtkshruch do you have a reproduction repo you can share?

shgtkshruch · 2022-12-18T08:42:54Z

@shilman Thanks for response.
I made sure to use the latest version of Storybook and related libraries and the error no longer occurs.

shilman · 2022-12-18T08:43:31Z

@shgtkshruch glad to hear that solved it!

lokeshwarobuli · 2023-03-01T02:25:39Z

@shgtkshruch how did you add NODE_ENV to your code ?

shgtkshruch · 2023-03-01T13:36:55Z

I run npm command with NODE_ENV like this.

NODE_ENV=development npm run build-storybook

Mattgic · 2023-04-05T08:05:45Z

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.

foxaltus · 2023-05-24T14:32:16Z

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?

Mattgic · 2023-05-24T14:35:51Z

With the fix I mentioned, play function now also work in production builds.

foxaltus · 2023-05-24T16:40:59Z

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

rgdzv · 2023-08-22T09:26:52Z

@foxaltus, did you handle the error?

foxaltus · 2023-08-22T09:34:28Z

@foxaltus, did you handle the error?

Unfortunately, no, I gave up with this :( Let me know if you ever find a workaround

rgdzv · 2023-08-22T09:53:23Z

@foxaltus, ok)

rgdzv · 2023-08-22T17:38:23Z

@foxaltus, well, that helped me in resolving an error:

Install cross-env
npm install cross-env --save-dev
Change your script

   "script": {
      "build-storybook": "cross-env NODE_ENV=development storybook build"
   }

Run command to launch your build version on the server
npx http-server storybook-static
Run test with URL from http-server
npm run test-storybook -- --url YOUR_URL

All tests should pass. I think (as mentioned above) there are some problems between userEvent from @storybook/testing-library and userEvent from @testing-library/user-event. All of that forces us to install additional package (cross-env). But I think not everyone has that kind of problem.

foxaltus · 2023-08-23T07:34:54Z

OK so that confirms that if you want to use interaction testing, you need to build in development mode. I'm not sure how I feel about that 🤔

Mattgic · 2023-08-23T08:02:57Z

Building in dev mode is a bad idea, your bundle will be much bigger and slower.
I managed to make it work, I'm sure you will find a way too :)

rgdzv · 2023-08-23T10:56:36Z

@foxaltus, well, found a desicion. Not need to build in development mode, I have 2 files for testing components with RTL. They are both for providers.

One of them for creating function to cover all providers (I took an example from here)

import { type ReactElement } from 'react'
import {
    render,
    type RenderResult,
    type RenderOptions,
    type queries
} from '@testing-library/react'
import { ThemeProviderTest } from './__mocks__/ThemeProviderTest'
import { MemoryRouter } from 'react-router-dom'

type R = RenderResult<typeof queries, HTMLElement, HTMLElement>

const AllTheProviders = ({
    children
}: {
    children: React.ReactNode
}): JSX.Element => {
    return (
        <MemoryRouter>
            <ThemeProviderTest>{children}</ThemeProviderTest>
        </MemoryRouter>
    )
}

export const customRender = (
    ui: ReactElement,
    options?: Omit<RenderOptions, 'wrapper'>
): R => render(ui, { wrapper: AllTheProviders, ...options })

Second file also for provider (custom router):

import {
    RouterProvider,
    type RouterProviderProps,
    createMemoryRouter
} from 'react-router-dom'
import { render } from '@testing-library/react'
import { routes } from 'app/providers/RouterProvider'

export const renderWithRouter = (path = '/'): RouterProviderProps => {
    const router = createMemoryRouter(routes, {
        initialEntries: [path]
    })

    render(<RouterProvider router={router} />)

    return { router }
}

Commenting them or deleting them made all tests pass in build version.

It means that providers (for testing components with RTL) not organized properly and seems that they somehow affect @storybook

foxaltus · 2023-08-24T07:15:05Z

Commenting them or deleting them made all tests pass in build version.

hey @rgdzv do you have any import of @testing-library/react left in your codebase after deleting these files?

rgdzv · 2023-08-24T07:45:45Z

@foxaltus, yes, in all .test. files where I use render and screen

Before coming to a decision, I deleted node_modules and package-lock.json and reinstalled it.

Also I deleted @testing-library/jest-dom, @testing-library/react, jest, jest-environment-jsdom and tried to test build version of SB. It worked. After I started installing all deleted packages one by one back to understand what makes error (and check tests of SB between). Also I tried to launch local version of SB between installing packages. There was a mistake (don't remember exact message) which indicated on these files.

shgtkshruch added bug needs triage labels Nov 5, 2022

shilman added needs reproduction and removed needs triage labels Dec 18, 2022

shgtkshruch closed this as completed Dec 18, 2022

reinertisa mentioned this issue Sep 19, 2023

play function does not work after React 18 #18258

Closed

isweetland mentioned this issue Dec 2, 2023

Force NODE_ENV=production for Storybook builds through the CLI chromaui/chromatic-cli#865

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

shgtkshruch commented Nov 5, 2022 •

edited

Loading

jtbandes commented Dec 17, 2022 •

edited

Loading

shilman commented Dec 18, 2022

shgtkshruch commented Dec 18, 2022

shilman commented Dec 18, 2022

lokeshwarobuli commented Mar 1, 2023

shgtkshruch commented Mar 1, 2023

Mattgic commented Apr 5, 2023 •

edited

Loading

foxaltus commented May 24, 2023 •

edited

Loading

Mattgic commented May 24, 2023

foxaltus commented May 24, 2023 •

edited

Loading

rgdzv commented Aug 22, 2023

foxaltus commented Aug 22, 2023

rgdzv commented Aug 22, 2023

rgdzv commented Aug 22, 2023

foxaltus commented Aug 23, 2023

Mattgic commented Aug 23, 2023

rgdzv commented Aug 23, 2023 •

edited

Loading

foxaltus commented Aug 24, 2023

rgdzv commented Aug 24, 2023

[Bug]: play function does not work in stories built for Production #19758

[Bug]: play function does not work in stories built for Production #19758

Comments

shgtkshruch commented Nov 5, 2022 • edited Loading

Describe the bug

To Reproduce

System

Additional context

jtbandes commented Dec 17, 2022 • edited Loading

shilman commented Dec 18, 2022

shgtkshruch commented Dec 18, 2022

shilman commented Dec 18, 2022

lokeshwarobuli commented Mar 1, 2023

shgtkshruch commented Mar 1, 2023

Mattgic commented Apr 5, 2023 • edited Loading

foxaltus commented May 24, 2023 • edited Loading

Mattgic commented May 24, 2023

foxaltus commented May 24, 2023 • edited Loading

rgdzv commented Aug 22, 2023

foxaltus commented Aug 22, 2023

rgdzv commented Aug 22, 2023

rgdzv commented Aug 22, 2023

foxaltus commented Aug 23, 2023

Mattgic commented Aug 23, 2023

rgdzv commented Aug 23, 2023 • edited Loading

foxaltus commented Aug 24, 2023

rgdzv commented Aug 24, 2023

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

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

shgtkshruch commented Nov 5, 2022 •

edited

Loading

jtbandes commented Dec 17, 2022 •

edited

Loading

Mattgic commented Apr 5, 2023 •

edited

Loading

foxaltus commented May 24, 2023 •

edited

Loading

foxaltus commented May 24, 2023 •

edited

Loading

rgdzv commented Aug 23, 2023 •

edited

Loading