Open SimonS opened 4 years ago
shilman
commented
4 years ago Looks like a bug. As a temp workaround try setting the docs source to code globally in .storybook/preview.js:
export const parameters = { docs: { source: { type: 'code' } } };
stale[bot]
commented
4 years ago Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Fasani
commented
3 years ago I have the same issue.
Can confirm the workaround above fixes the issue.
Does anyone have any insight into what this line of code is doing to my project to make it magically work again?
Fasani
commented
3 years ago Actually to expand further, I have a slightly different issue. Maybe this helps some one to debug.
I have stories which load images in React components. To remove the need for a BE I use mock JSON data with a Base64 string instead of a file URL.
Psuedo code below:
export const servicesData = {
id: 2,
templateBlockId: 'template-services',
settings: {
visible: true,
image: 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAg...'
},
textContent: [...],
}import { servicesData } from '../../data/service-data.mock';
export function ServicesBlock() {
return (
<Services data={servicesData} />
);
}Something like that, anyway it also worked for me until recently with no issues.
I use NX "@nrwl/storybook" "12.5.8" looking at my yarn.lock it looks like I have "@storybook/core" "6.3.6".
I have different size Base64 strings, some images are just 30kb and some are up to 200kb. It slows less on the smaller ones eventually the block will load but it can make the browser hang and take 30 seconds to load. After adding the fix above it reverts back to normal how it used to be.
Describe the bug We were including our images inline in Javascript, and up to the most recent version of Storybook, they were working with no issues whatsoever. They are large-ish (one was 21k and the other 82k - expanding up to 28k and 111k in JS), but we've never had any issues.
When used in Firefox, they fail completely with the error "too much recursion", whereas Chrome struggles but eventually shows them.
To Reproduce I've attached an example asset looks like this (my goodness, I hope it collapses or scrolls 😬):
de-inlining it and including it like so fixes the issue:
Expected behavior Honestly, I'm not surprised that 111kb of inlined image has caused issues here - but <v6 we've never experienced any issues. I'm only logging this in case it's an unintended consequence of something somewhere else, and it might be useful to someone else who is experiencing performance issues on upgrade to 6.
Screenshots Here's Firefox giving up:
Code snippets If applicable, add code samples to help explain your problem.
System: Please paste the results of
npx sb@next infohere.Environment Info:
System: OS: macOS Mojave 10.14.6 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 12.14.0 - ~/.fnm/current/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.4 - ~/.fnm/current/bin/npm Browsers: Chrome: 84.0.4147.125 Firefox: 79.0 Safari: 13.0.3
Cheers!