storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.49k stars 9.29k forks source link

[Bug]: Documentation Pages in Safari 17.0 (19616.1.27.211.1) #25112

Open dnichols opened 10 months ago

dnichols commented 10 months ago

Describe the bug

Some documentation pages load but then become blank <1s after loading

This happens on Safari 17.0 (19616.1.27.211.1), macOS 14.0 (23A344) Example page: https://storybook.js.org/docs/6.5/writing-stories/build-pages-with-storybook

To Reproduce

Load a page: https://storybook.js.org/docs/6.5/writing-stories/build-pages-with-storybook

System

No response

Additional context

Console log during bug:

[Error] TypeError: null is not an object (evaluating 't.match(/\.((?:\w+-*)+)\.mdx$/)[1]') — https://release-6-5--storybook-frontpage.netlify.a…cs-screen-docs-screen-tsx-36581a59db83bf0699e0.js:0
    du (framework-660ea76ce3345336ed06.js:2:72424)
    (anonymous function) (framework-660ea76ce3345336ed06.js:2:72938)
    Ua (framework-660ea76ce3345336ed06.js:2:54211)
    ki (framework-660ea76ce3345336ed06.js:2:101715)
    bi (framework-660ea76ce3345336ed06.js:2:101285)
    yi (framework-660ea76ce3345336ed06.js:2:100823)
    (anonymous function) (framework-660ea76ce3345336ed06.js:2:112607)
    ws (framework-660ea76ce3345336ed06.js:2:113116)
    ls (framework-660ea76ce3345336ed06.js:2:105615)
    S (framework-660ea76ce3345336ed06.js:2:138146)
    T (framework-660ea76ce3345336ed06.js:2:138678)
[Error] Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    reportError (framework-660ea76ce3345336ed06.js:2:122125)
    (anonymous function) (framework-660ea76ce3345336ed06.js:2:112945)
    ws (framework-660ea76ce3345336ed06.js:2:113116)
    ls (framework-660ea76ce3345336ed06.js:2:105615)
    S (framework-660ea76ce3345336ed06.js:2:138146)
    T (framework-660ea76ce3345336ed06.js:2:138678)
[Error] TypeError: null is not an object (evaluating 't.match(/\.((?:\w+-*)+)\.mdx$/)[1]') — https://release-6-5--storybook-frontpage.netlify.a…cs-screen-docs-screen-tsx-36581a59db83bf0699e0.js:0
    du (framework-660ea76ce3345336ed06.js:2:72424)
    (anonymous function) (framework-660ea76ce3345336ed06.js:2:72649)
    Ua (framework-660ea76ce3345336ed06.js:2:54211)
    ki (framework-660ea76ce3345336ed06.js:2:101850)
    bi (framework-660ea76ce3345336ed06.js:2:101285)
    yi (framework-660ea76ce3345336ed06.js:2:100823)
    (anonymous function) (framework-660ea76ce3345336ed06.js:2:112607)
    ws (framework-660ea76ce3345336ed06.js:2:113116)
    is (framework-660ea76ce3345336ed06.js:2:106874)
    jl (framework-660ea76ce3345336ed06.js:2:47616)
    (anonymous function) (framework-660ea76ce3345336ed06.js:2:113113)
    ws (framework-660ea76ce3345336ed06.js:2:113116)
    ls (framework-660ea76ce3345336ed06.js:2:105615)
    S (framework-660ea76ce3345336ed06.js:2:138146)
    T (framework-660ea76ce3345336ed06.js:2:138678)
[Error] TypeError: null is not an object (evaluating 't.match(/\.((?:\w+-*)+)\.mdx$/)[1]')
    jl (framework-660ea76ce3345336ed06.js:2:47707)
    (anonymous function) (framework-660ea76ce3345336ed06.js:2:113113)
    ws (framework-660ea76ce3345336ed06.js:2:113116)
    ls (framework-660ea76ce3345336ed06.js:2:105615)
    S (framework-660ea76ce3345336ed06.js:2:138146)
    T (framework-660ea76ce3345336ed06.js:2:138678)
DzmVasileusky commented 9 months ago

Same in the latest Chrome for Angular 17 app. (Stopped to render after Angular update)

     node: v16.15.0
     npm: 8.10.0
    "@angular/cdk": "17.0.4",
    "@nx/storybook": "v17.2.5",
    "@storybook/addon-designs": "^7.0.5",
    "@storybook/addon-interactions": "7.6.7",
    "@storybook/blocks": "^7.0.27",
    "@storybook/addon-a11y": "7.6.7",
    "@storybook/addon-designs": "^7.0.5",
    "@storybook/addon-docs": "7.6.7",
    "@storybook/addon-essentials": "7.6.7",
    "@storybook/addons": "^7.0.27",
    "@storybook/angular": "7.6.7",
    "@storybook/builder-webpack5": "^7.4.5",
    "@storybook/core-server": "7.6.7",
    "@storybook/jest": "0.2.3",
    "@storybook/mdx1-csf": "^1.0.0",
    "@storybook/test-runner": "0.13.0",
    "@storybook/testing-library": "0.2.2",
    "@storybook/theming": "^7.0.27",
    "storybook": "^7.0.27",

Errors

index.mjs:67 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
content.js:73 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
    at g (content.js:73:33710)
svkarpovich commented 9 months ago

I installed react in devDependencies and it resolved the same issue: pnpm i -D react

jonniebigodes commented 9 months ago

@dnichols, thanks for reaching out to us with your issue. We appreciate it. I checked, and I was able to confirm it. We'll need to research this further and see what is happening. @svkarpovich and @DzmVasileusky appreciate the additional context, but it seems that the issue you both are facing is a completely different one as what @dnichols is mentioning is related to the documentation site itself.