When upgrading to Storybook 8 I get "Error: Storybook object not found on the window. Open Storybook and check the console for errors."

[rudeayelo]

The problem

When I try tu upgrade to the latest version of Storybook (8.0.4 currently) and I trigger the percy storybook command, the process stops just after downloading Chromium.

Environment

• Node version: v20.5.1
• @percy/cli version: 1.28.2
• @percy/storybook version: 5.0.1
• Version of Percy SDK you’re using: -
• If needed, a build or snapshot ID: -
• OS version: MacOS Sonoma 14.4 (23E214)
• Type of shell command-line [interface]: zsh

Details

If necessary, describe the problem you have been experiencing in more detail.

Debug logs

[percy] Successfully downloaded Chromium 929475
[percy] Percy has started!
[percy] Stopping percy...
[percy] Build not created
[percy] Error: Storybook object not found on the window. Open Storybook and check the console for errors.
error: script "test-storybook:visual" exited with code 1

Code to reproduce issue

I grabbed the React starter template from Storybook, upgraded it and added Percy, same issue appears, here's the repo: https://github.com/rudeayelo/percy-storybook-8

[ArnaudWeyts]

Also running into this, but it seems like it's flaky for me. Sometimes it passes, sometimes it throws this error.

[JackHowa]

Experienced this too. It sometimes works?

[jalandis]

Just ran into this issue while upgrading to Storybook 8.

[percy:cli] Error: Storybook object not found on the window. Open Storybook and check the console for errors.

[dkremez]

We are running into the same issue.

[percy] Error: Storybook object not found on the window. Open Storybook and check the console for errors.
error Command failed with exit code 1.

[rudeayelo]

I reported it through BrowserStack support center, as suggested here: https://github.com/percy/percy-storybook/pull/918#issuecomment-2027162812

[MaelFr]

Hello, Received some news regarding this issue:

The Engineering team … informed me that they have prioritized this task and begun working on the Storybook upgrade for v8. We anticipate completing this upgrade by the 20th of May (Tentative).

[rishigupta1599]

Hey, A quick update here. We have shipped percy/storybook v6.0.0-beta.0 SDK which should resolve this issue.

Do try out the new SDK, and provide us feedback. Maybe even close this issue, if the problem has been resolved. (otherwise, we'll do so if it's not reproducible till the stable version is released)

Thanks.

[jacobrask]

When upgrading to 6.0.0-beta we got a large number of “Error fetching index.json” errors

[etarhan]

I have the same issue with Error fetching index.json and other asset preloading errors, it seems related to the new package version. I already have a support ticket open with BrowserStack.

As a workaround, the following settings seem to do the trick:

discovery:
  concurrency: 1
  disableCache: true

[ppulwey]

Hey,

any progress with this issue? We have a blocker in our GitLab CI/CD pipeline bc of this.

[Amit3200]

Hi @ppulwey We are looking into it. Allow us sometime to debug and comeback on it.

[rishigupta1599]

Hello everyone,

If you could kindly provide us with the reproducible steps of the issue you're experiencing, it would greatly assist us in resolving it efficiently.

Additionally, please reach out to BrowserStack support with the reproducible steps to recreate the issue, preferably using storybook you are using. This will enable us to better understand and address the problem. We're more than happy to assist you further once we have all the necessary information.

In parallel we are trying to reproduce it on our end.

Thank you for your cooperation.

[ppulwey]

Hello everyone,

If you could kindly provide us with the reproducible steps of the issue you're experiencing, it would greatly assist us in resolving it efficiently.

Additionally, please reach out to BrowserStack support with the reproducible steps to recreate the issue, preferably using storybook you are using. This will enable us to better understand and address the problem. We're more than happy to assist you further once we have all the necessary information.

In parallel we are trying to reproduce it on our end.

Thank you for your cooperation.

Hello @rishigupta1599,

you might have missed that the OP already added a link to a test repo. We're facing this issue in our GitLab CI/CD pipeline with the following configuration in the yml file:

visual_regression_test:
  stage: test
  image:
    name: docker-prod.hv.devk.de/awsplattform/vendor-images/docker.io/library/node:18.16.0-alpine3.17
    entrypoint: [""]
    pull_policy: if-not-present
  tags:
    - cloud-vprod
  variables:
    PERCY_TOKEN:  ${Percy_Token}
    PERCY_TARGET: storybook-static
    PERCY_BROWSER_EXECUTABLE: /usr/bin/chromium-browser
  before_script:
    - apk update && apk add --no-cache chromium
  script:
    - which chromium || which chromium-browser
    - ls storybook-static
    - npm ci
    - npm run test:percy
  needs: ["build_storybook"]
  dependencies:
    - build_storybook

Tried it locally with node 18 and it works. On our side this only occurs in GitLab.

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[ppulwey]

It's been 20 days and still no progress. Issue is stale now. It's still relevant.

Do you need any further information about this issue. For me it seems you have everything you need.

[rishigupta1599]

Hey @ppulwey,

After testing on our end with the provided Storybook setup at rudeayelo/percy-storybook-8, we were unable to reproduce any issues with newer SDK version 6.0.0. Our tests ran successfully from local environments, GitHub Actions, and GitLab CI using the same configuration details you shared.

Here are the configurations we used:

GitHub Action Config:

name: Test Storybook

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  test_storybook:
    runs-on: ubuntu-latest

    container:
      image: node:18.16.0-alpine3.17
      options: --entrypoint ""

    env:
      PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
      PERCY_TARGET: storybook-static
      PERCY_BROWSER_EXECUTABLE: /usr/bin/chromium-browser

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install Chromium
        run: |
          apk update
          apk add --no-cache chromium

      - name: Verify Chromium installation
        run: |
          which chromium || which chromium-browser

      - name: Install dependencies
        run: npm install

      - name: Build Storybook
        run: npm run build-storybook

      - name: Run visual tests
        run: npm run visual

GitLab Runner Config:

visual_regression_test:
  stage: test
  image:
    name: node:18.16.0-alpine3.17
    entrypoint: [""]
  variables:
    PERCY_TOKEN: ${Percy_Token}
    PERCY_TARGET: storybook-static
    PERCY_BROWSER_EXECUTABLE: /usr/bin/chromium-browser
  before_script:
    - apk update && apk add --no-cache chromium
  script:
    - which chromium || which chromium-browser
    - ls storybook-static
    - npm install
    - npm run visual

The fact that the issue only occurs in your CI/CD pipeline and not locally suggests a potential resource issue with your CI agents. If it were an SDK issue, we would expect to encounter it locally as well.

We recommend raising a support ticket with Browserstack to investigate further. Please initiate this so that we can collaborate and resolve the issue promptly.

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 28 days with no activity.