Fix the Storybook 'Cannot find module './src/temp/config’' Error for Good on Sitecore JSS Projects

What Are the Symptoms of This Storybook Error?

Are you encountering the Cannot find module './src/temp/config' error when launching or building Storybook in a Sitecore JSS project? The console error usually look like this:

PS> npm run storybook 

> sxastarter@21.5.0 storybook 
> storybook dev -p 6006 

@storybook/cli v7.5.3 

... Various info and warn logs 

=> Failed to build the preview 
Error: Cannot find module './src/temp/config' 
Require stack: 
- .\next.config.js 
	at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)

This file is effectively missing sometimes for some of your colleagues or on your computer. This can happen:

• Just after cloning the repository.

• Before running the Docker containers for the solution.

What is the Cause of This Error?

The ./src/temp/config.js file is not committed and is generated by Sitecore JSS. The NPM script responsible of generating this file is the bootstrap script. By inspecting the package.json scripts, you can notice that the bootstrap script is called before running any Next.js command:

"scripts": {
  "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts",
  "build": "npm-run-all --serial bootstrap next:build npx tailwindcss -i ./app.css -o ./dist/output.css --watch",
  "start:connected": "npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
  "start:production": "npm-run-all --serial bootstrap next:build next:start"
},

How to Manually Fix the Error?

To fix this issue with Storybook, we must run that bootstrap script before running any of the Storybook NPM scripts as well. The manual solution consists of running the npm run bootstrap command once and then retrying your Storybook command. Now that the temporary files are generated, Storybook should build and execute without that error.

There is a Better Way!

While the manual solution works well and needs to be executed only once, it does not help new team members or building and deploying Storybook to Vercel or Netlify.

The real solution consists of automatically running the bootstrap script before running the Storybook scripts. Instead of modifying the existing Storybook scripts, I recommend using the pre & post scripts NPM feature (Thanks to Rob Ahnemann for the tip). That way, when running npm run storybook, NPM will automatically run prestorybook, storybook, and poststorybook in order if those scripts exist.

1. Open your package.json file.

2. Above or around your existing Storybook scripts, add the following 2 scripts to run before the storybook, and build-storybook, scripts:

   "prestorybook": "npm run bootstrap", 
   "prebuild-storybook": "npm run bootstrap",

   The end result should look like this:

   "prestorybook": "npm run bootstrap", 
   "storybook": "storybook dev -p 6006", 
   "prebuild-storybook": "npm run bootstrap", 
   "build-storybook": "storybook build"

3. Save your file.

Now, every time you, someone on your team, or your deployment scripts want to build or launch Storybook, this will ensure the temporary files are always created first.

Happy Storybooking!

---