index.js:56
Unexpected error while loading ./stories/Feature/Page Content/Button.stories.tsx: Cannot find module 'components/Feature/Common/Button'
Error: Cannot find module 'components/Feature/Common/Button'
at webpackMissingModule (http://localhost:6006/main.iframe.bundle.js:1248:50)
at ./src/stories/Feature/Page Content/Button.stories.tsx (http://localhost:6006/main.iframe.bundle.js:1248:157)
at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
at webpackContext (http://localhost:6006/main.iframe.bundle.js:2526:9)
at http://localhost:6006/vendors-node_modules_sitecore-jss_sitecore-jss-react_dist_esm_components_SitecoreContext_js-n-3f8f16.iframe.bundle.js:12815:29
at Array.forEach ()
at http://localhost:6006/vendors-node_modules_sitecore-jss_sitecore-jss-react_dist_esm_components_SitecoreContext_js-n-3f8f16.iframe.bundle.js:12813:18
at Array.forEach ()
at executeLoadable (http://localhost:6006/vendors-node_modules_sitecore-jss_sitecore-jss-react_dist_esm_components_SitecoreContext_js-n-3f8f16.iframe.bundle.js:12812:10)
error @ index.js:56
I was stumped at first, but with a little bit of trial and error, I identified that typescript path mapping is the cause. Then it was just a matter of simple googling to find a way for Storybook (in this case, webpack) to resolve the paths.
Run npm i tsconfig-paths-webpack-plugin
.
Add config.resolve.plugins to your webpackFinal in main.js like so:
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); --- ADD THIS LINE ---
module.exports = {
"stories": [
...
],
"addons": [
...
],
staticDirs: [...],
"framework": "@storybook/react",
"core": {
"builder": "@storybook/builder-webpack5"
},
webpackFinal: async (config, { configType }) => { --- ADD THIS LINE ---
config.resolve.plugins = [new TsconfigPathsPlugin()]; --- ADD THIS LINE ---
return config; --- ADD THIS LINE ---
} --- ADD THIS LINE ---
}
If done correctly, Storybook should now be able to resolve ts path mapping correctly. Your mileage may vary if you are using different versions of webpack, storybook, or typescript. Here is my relevant package.json:
{
...
"dependencies": {
"next": "^12.1.6",
"next-localization": "^0.10.0",
"nprogress": "~0.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sb": "^6.5.8"
},
"devDependencies": {
...
"@storybook/addon-actions": "^6.5.8",
"@storybook/addon-essentials": "^6.5.8",
"@storybook/addon-interactions": "^6.5.8",
"@storybook/addon-links": "^6.5.8",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.8",
"@storybook/manager-webpack5": "^6.5.8",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.5.8",
"@storybook/testing-library": "^0.0.11",
...
"tsconfig-paths-webpack-plugin": "^3.5.2",
"typescript": "~4.3.5",
...
},
"scripts": {
...
}
}
Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.