Reading time: 3 min read
Fix the Storybook 'Cannot find module './src/temp/config’' Error for Good on Sitecore JSS Projects
A definitive solution to the 'cannot find module './src/temp/config’' error in Storybook for Sitecore JSS projects.
A definitive solution to the 'cannot find module './src/temp/config’' error in Storybook for Sitecore JSS projects.
Start typing to search...
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.
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"
},
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.
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.
Open your package.json file.
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"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!