Skip to content

Commit

Permalink
fix: storybook dev command
Browse files Browse the repository at this point in the history
Fixes the following error when running pnpm storybook:dev locally:

```
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/react-webpack5/preset.
```

Reference: https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments
  • Loading branch information
djm158 committed Dec 2, 2024
1 parent 1a8788b commit f628b2e
Showing 1 changed file with 59 additions and 56 deletions.
115 changes: 59 additions & 56 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,56 +1,59 @@
import type { StorybookConfig } from "@storybook/react-webpack5";

/* globals __dirname:false */
const path = require("path");
const ROOT = path.resolve(__dirname, "..");
const STORIES = path.resolve(ROOT, "stories");

const config: StorybookConfig = {
addons: [
"@storybook/addon-essentials",
{
name: "@storybook/addon-storysource",
options: {
rule: {
test: [/\.stories\.(jsx?|tsx?)$/],
include: [STORIES],
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
"@storybook/addon-webpack5-compiler-swc",
"@chromatic-com/storybook",
],

framework: {
name: "@storybook/react-webpack5",
options: {
builder: {},
},
},

stories: ["../stories/**/*.stories.tsx"],

typescript: {
check: false,
checkOptions: {
typescript: {
configFile: path.resolve(ROOT, "tsconfig.storybook.json"),
},
},
},

webpackFinal: async (config) => {
if (config.resolve) {
config.resolve.alias = {
...config.resolve.alias,
"@": path.resolve(__dirname, "../packages"),
};
}
return config;
},
};

export default config;
import type { StorybookConfig } from "@storybook/react-webpack5";

/* globals __dirname:false */
const path = require("path");
const ROOT = path.resolve(__dirname, "..");
const STORIES = path.resolve(ROOT, "stories");

const getAbsolutePath = (packageName: string): any =>
path.dirname(require.resolve(path.join(packageName, 'package.json')));

const config: StorybookConfig = {
addons: [
getAbsolutePath("@storybook/addon-essentials"),
{
name: "@storybook/addon-storysource",
options: {
rule: {
test: [/\.stories\.(jsx?|tsx?)$/],
include: [STORIES],
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
getAbsolutePath("@chromatic-com/storybook"),
],

framework: {
name: getAbsolutePath("@storybook/react-webpack5"),
options: {
builder: {},
},
},

stories: ["../stories/**/*.stories.tsx"],

typescript: {
check: false,
checkOptions: {
typescript: {
configFile: path.resolve(ROOT, "tsconfig.storybook.json"),
},
},
},

webpackFinal: async (config) => {
if (config.resolve) {
config.resolve.alias = {
...config.resolve.alias,
"@": path.resolve(__dirname, "../packages"),
};
}
return config;
},
};

export default config;

0 comments on commit f628b2e

Please sign in to comment.