Our development process with Next or JSS includes working with Storybook. First off, it’s pretty slick to be able to see all the components in one place, even outside Sitecore. Second, those fun mac folks aren’t going to be spinning up Windows containers in the near future, and they need to be able to see how things look as they work.

One thing we’ve dealt with in the past was that anytime someone ran Storybook (using ‘npm run storybook’), they’d get the following:

Error: Cannot find module './src/temp/config' when running Storybook

One solution is to remove this location from the .gitignore, but there’s an even easier way. David Ham has a great solution here to create a mock and then alias the path, so there’s nothing terribly custom. However, if you’re on Storybook 7, things don’t seem to work. It looks like this is how the manager is built in 7 vs 6. Check out this GitHub issue. So what can you do?

There’s a little more of a low-tech solution here, using some out-of-the-box functionality in your package.json file. If you check out the solution, you’ll notice a file in the “scripts” named “bootstrap.js” This file has a portion which actually generates the config file and stores it in that temp folder! So, how do you run this? Well, you could introduce a new script in your package.json file, much like this:

"build-with-config": "npm-run-all --serial bootstrap storybook"

The only drawback here is you’ll have to remember to “npm run build-with-config” vs “npm run storybook”

There’s a slightly smarter way, though:

"prestorybook": " npm run bootstrap"

Wait, don’t I have to do “npm run prestorybook” though? That’s the same thing! Actually, no! You still get to use your normal “npm run storybook” because there is a nifty Pre/Post script functionality built in, which you can read about on the official docs.

That wasn’t the worst thing to fix, was it?