Nodejs.dev: Broken Story book components

[designMoreWeb]

Story book has a few broken components:
Broken components are Navigation item, Navigationsection, Pagination, and release toggle

[MRslimcoder]

I wanna work on this issue, someone please assign it to me.

[rodion-arr]

Hey @slimcoders any progress on this?

[Bhavin789]

Hi @rodion-arr, may I have a look into this if @slimcoders has not found the solution already for the same? Let me know. Looks like some environment issue, not sure though :confused:
Thanks!

[MRslimcoder]

Still looking into it.

[mikeesto]

I just wanted to note here that there's a PR (https://github.com/nodejs/nodejs.dev/pull/1097) to update Storybook from v5 -> v6. I'm unsure if it will impact this issue but potentially worth looking into as well

[Bhavin789]

@slimcoders @rodion-arr I feel just overriding the BASE_PATH variable while setting up the storybook in gatsby should solve this issue. It occurs when we run the storybook in prod mode. @slimcoders if not found any other solution, can you try to look into the above? Or can I take this up and raise a PR? Let me know. Thanks! cc// @mikeesto

[Bhavin789]

Any updates here? Can I give it a try? Thanks! cc// @slimcoders @rodion-arr

[rodion-arr]

Hey @Bhavin789, this is up to @slimcoders, I was also interested in this issue but can't be involved now for some reasons :)

[marcustisater]

I just wanted to note here that there's a PR (#1097) to update Storybook from v5 -> v6. I'm unsure if it will impact this issue but potentially worth looking into as well

@benhalverson updated to the latest version but it dosen't seem to have fixed this issue.

[Bhavin789]

Hi, @marcustisater This won't get fixed with a version bump.

We need to mock out the BASE_PATH value to "" in the storybook configurations to make this work. If @slimcoders is not working here, may I raise a PR for the same? Let me know.

Thanks! cc// @benhalverson

[benhalverson]

I wonder why it works ok with some but not others without this change. Any ideas? @Bhavin789

[Bhavin789]

I wonder why it works ok with some but not others without this change. Any ideas? @Bhavin789

@benhalverson When we worked on revamping React tests to RTL, we observed that in environments other than gatsby, few properties are not present on window and global objects, __PATH_PREFIX__ was also one of them and that is why, I think, we have overwritten that as well in storybook configs.

I referred this to somewhat understand what was happening and strongly feel that this has something to do with how gatsby handles Link component internally. Interestingly, all the failures are linked to this Link tag itself :confused:

__BASE_PATH__ being not available in the storybook build environment on global is what I suspect the cause of the above errors which is used by Link. I am still not 100% sure due to my limited knowledge, but if anyone has some supporting thoughts, please do share. Thanks!

[Bhavin789]

Also, when I logged the failing items in the storybook, it printed the pathName which are kinda slugs that I think are used by gatsby-source-filesystem plugin. This slug creation as per this StackOverflow explanation uses basePath internally. So, this can also be a reason (I am more inclined towards this :confused: )