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 react-scripts@2.1.3 and @storybook/react@4.1.6 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 😉 : #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 🙏

[jimjeffers]

What exactly is the solution to this issue? Or what are the steps to troubleshoot this? It's not clear to me why this is occurring.

[shilman]

@jimjeffers #5269 (comment)

[jimjeffers]

Thanks @shilman in this case I'm not using serve - I just deployed a static build to an S3 bucket but I'm getting the crazy inception issue. I just tried using serve without the -s flag but still get the inception! So odd. I can't spot any errors in the console so I'm having trouble debugging this one. I must have a different issue but same outcome as has been discussed on this thread.

The storybook causing this same inception issue is here in case there's an obvious way to debug the problem (the storybook works fine when running dev server - it's just an issue with the static build):
http://gigzilla-stories.s3-website-us-west-2.amazonaws.com/?path=/story/example-introduction--page

[shilman]

Are you using the -p option?

[jimjeffers]

@shilman This is what I've been using to deploy:

{
// ...
        "deploy-storybook": "storybook-to-aws-s3 --bucket-path=gigzilla-stories --aws-profile=gigzilla-storybook",
        "build-storybook": "build-storybook -s public",
//...
}

[jimjeffers]

@shilman here are the versions I'm on if it helps:

    "devDependencies": {
        "@storybook/addon-actions": "^6.2.9",
        "@storybook/addon-essentials": "^6.2.9",
        "@storybook/addon-links": "^6.2.9",
        "@storybook/node-logger": "^6.2.9",
        "@storybook/preset-create-react-app": "^3.1.7",
        "@storybook/react": "^6.2.9",
        "@storybook/storybook-deployer": "^2.8.7",
     }

[shilman]

Does it also have that problem when you serve locally?

[jimjeffers]

@shilman Looks like it! If I build locally and run serve from the output dir as such:

storybook-static % npx serve

I get that recursion issue. No errors in the console however.

[shilman]

Are there any soft links in the public directory? Do you have a repro you can share?

[jimjeffers]

@shilman I gave up and just moved the components/stories into a fresh CRA project. I have no idea what was causing it but we're migrating the project anyway. It would be handy if there was a way to isolate the error that causes the 'inception' though! My guess is it happens somewhere in the iframe which is why we don't see any errors in the inspector?

[nilslp]

Did anyone manage to find a solution for this?

All was working locally via yarn start (dev) and when yarn build (production) then serving.
Once we tested a deployment on amplify the inception UI issue appeared.

[Alpha1337k]

@nilslp Take a look at the redirects of amplify. It might be that all requests would be redirected to /index.html instead of /iframe.html etc.

Hope this helps.

[nilslp]

@nilslp Take a look at the redirects of amplify. It might be that all requests would be redirected to /index.html instead of /iframe.html etc.

Hope this helps.

You were right @Alpha1337k, I had meant to return to post this as amplify was the issue all along. Thanks