Storybook: Build creating nested storybook UI - Inception!

[dstroot]

Describe the bug
A clear and concise description of what the bug is.
Using vanilla Create-React-App, then add storybook, then run build-storybook. Here is the results:

To Reproduce
Steps to reproduce the behavior:

• Run CRA
• Add storybook
• Run build-storybook
• serve the results

Expected behavior
A clear and concise description of what you expected to happen.
Storybook should look the same as when you use yarn storybook

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:

• OS:MacOS
• Device: Macbook Pro 2018
• Browser: Chrome latest
• Framework: React
• Addons: None - Using CRA to bootstrap app
• Version: 4.1.6 and Latest

Additional context
Add any other context about the problem here.

[tmeasday]

Hi @dstroot, thanks for the report.

I tried to reproduce this with [email protected] and @storybook/[email protected] and I am not seeing the problem. I opened the built storybook directly (as in file://) and served it with npx serve.

I wonder how you are serving your built storybook? Perhaps it is somehow redirecting /iframe.html to /?

[shilman]

@tmeasday His screenshot is from SB5, not SB4. However I was not able to reproduce on 5.0.0-alpha.4 (the latest next). I tried both serve and file:// params.

[shilman]

Found this other nice bug while trying to repro 😉 : https://github.com/storybooks/storybook/issues/5274

[dstroot]

I am going to close this - just tried again with npx serve and no issues. I was using "serve" installed globally (npm -g) but I doubt that is the real root cause. So weird - yesterday no matter what I could not get it to work and today is works great.

[efmr]

Found the same issue, to reproduce it:

serve -s storybook-static

Removing the single page app flag fixes it:

serve storybook-static

[dstroot]

@efmr > Gah! That was it!

[ksegal]

I encountered this same resulting nested storybook behavior but the cause of the bug was slightly different. There is a bug in the babel 7.7.0 release, reported here. As a result of these type errors, my storybook build fails but then renders like the image above. Once this fix is out in a release, it should be safe to upgrade, but until then you may want to lock in the babel 7.6 minor version.

[shilman]

Thanks @ksegal! Hope they get that fix out soon 🙏