[Issue #387]: Resolved Storybook build error

[mqwebster-nava]

Ticket

Resolves #387

Changes

Updated the .storybook/main.js in the top-level app directory.

Context for reviewers

The error occurs when running npm run storybook from the terminal to build a dev Storybook environment locally. I added the code below at the top of the file to explicitly set a __dirname value.

import path, { dirname } from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

According to Node.js documentation, __dirname is unavailable in ES modules. They recommend import.meta.dirname instead to replicate this behavior.

I was able to find use cases for the recommended solution in this Stack Overflow thread as well as this Medium blog article.

Testing

Storybook builds and runs locally in http://localhost:6006 as expected when the above command is used.

[lorenyu]

looks good, some nits:

• for the PR title and for the squash commit message when you merge, can you follow git commit message conventions here: https://cbea.ms/git-commit/ (sentence case not title case, and imperative voice not past tense i.e. "Fix Storybook build error" rather than "Fixed Storybook Build Error"
• can you add more context to the PR description explaining the root cause of the issue? i want to see an explanation of the fact that __dirname is no longer available by default and perhaps include links to the stackoverflow article you found the solution in and the official node docs explaining the error

[lorenyu]

thanks!

fyi nit for the future, PR titles / commit messages should use imperative voice e.g. "Resolve Storybook build error" instead of past tense "Resolved Storybook build error"

[mqwebster-nava]

@lorenyu

thanks!

fyi nit for the future, PR titles / commit messages should use imperative voice e.g. "Resolve Storybook build error" instead of past tense "Resolved Storybook build error"

Oh shoot, thanks for flagging that. I changed it to be sentence case and forgot about the tense. I'll remember that next time, thanks!