Storybook initial config for react throws error

Question

I initialized storybook for react app with npx storybook init command, then run nr storybook and it throws an error:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/igormakowski/Documents/tenset-marketplace/.storybook/preview.js-generated-config-entry.js: (0 , _genMapping.maybeAddMapping) is not a function
    at SourceMap.mark (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/source-map.js:49:37)
    at Buffer._mark (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:138:60)
    at Buffer._append (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:117:12)
    at Buffer.append (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:78:10)
    at Generator._append (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:192:52)
    at Generator.word (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:100:10)
    at Generator.ImportDeclaration (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/generators/modules.js:172:8)
    at /Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:310:19
    at Buffer.withSource (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/buffer.js:208:5)
    at Generator.withSource (/Users/igormakowski/Documents/tenset-marketplace/node_modules/@babel/core/node_modules/@babel/generator/lib/printer.js:176:15)
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[13]

score 0 · Answer 1 · answered Jun 22 '22 at 08:17

0

Try deleting node_modules. It sounds stupid but it's working for me and at least one other person: I'm getting the error "_genMapping.maybeAddMapping is not a function" when I try to collect coverage from jest tests.

answered Jun 22 '22 at 08:17

oskarth

927
2
9
18

score 0 · Answer 2 · answered Aug 17 '23 at 15:47

Try to modify storybook main.js file

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal: async (config) => {
    return {
      ...config,
      module: {
        rules: [
          {
            test: /\.(?:js|mjs|cjs)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: [
                  [
                    "@babel/preset-env",
                    { targets: "defaults" },
                    "@babel/preset-react",
                  ],
                ],
              },
            },
          },
          {
            test: /\.(ts|tsx)$/i,
            loader: "ts-loader",
            exclude: ["/node_modules/"],
          },
        ],
      },
    };
  },
};

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 18 '23 at 22:33

Storybook initial config for react throws error

2 Answers2