Fails to build storybook static when adding the addon

[minuz]

Hi, I've been trying to add this addon into my storybook. It works perfectly when in Dev mode. But when building for publishing, I get the following:

ERR! => Failed to build the preview
ERR! Module parse failed: Identifier '_$$mocks$$' has already been declared (2:6)
ERR! File was processed with these loaders:
ERR!  * ./node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js
ERR!  * ./node_modules/@nx/webpack/node_modules/source-map-loader/dist/cjs.js
ERR! You may need an additional loader to handle the result of these loaders.
ERR! | var _$$mocks$$;
ERR! > const _$$mocks$$ = {};
ERR! | export const $$mock$$ = (name, value) => {
ERR! |   if (typeof _$$mocks$$[name] !== "function") throw new Error("Exported function not found.");
ERR! Module Warning (from ./node_modules/@nx/webpack/node_modules/source-map-loader/dist/cjs.js):
ERR! Failed to parse source map from '/Users/fernando.baba/Dev/repos/expedo-fe/node_modules/@base2/pretty-print-object/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/fernando.baba/Dev/repos/expedo-fe/node_modules/@base2/pretty-print-object/src/index.ts'

This is my main.js

const rootMain = require('../../../.storybook/main');
module.exports = {
  ...rootMain,
  core: {
    ...rootMain.core,
  },
  stories: [
    '../src/app/**/*.stories.mdx',
    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
    '../../../libs/**/*.stories.mdx',
    '../../../libs/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    ...rootMain.addons,
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
    '@nx/react/plugins/storybook',
    '@storybook/addon-mdx-gfm',
    'storybook-addon-module-mock'
  ],
  staticDirs: [
    {
      from: '../../../libs/shared/ui/style-constants/src/assets',
      to: '/assets/',
    },
    {
      from: '../../../apps/dawn-ui/src/assets',
      to: '/assets/',
    },
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  webpackFinal: async (
    /** @type {import('webpack').Configuration} */ config,
    { configType }
  ) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, {
        configType,
      });
    }
    return config;
  },
};

This is a monorepo using nrwl nx.

Any help will be appreciated. Thanks!

[willjenks]

We're also seeing the same problem

[jedrojas]

Hey there! Any updates here? Seeing the same error, works fine in dev mode and fails when building

[dzegarra]

I'm facing the same problem in a nextjs project with 7.6.2.

Module parse failed: Identifier '_$mocks$' has already been declared (77:6)
File was processed with these loaders:
 * ../../node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| };
| export { preview as default };
> const _$mocks$ = {};
| export const $mock$ = (name, value) => {
|   if (typeof _$mocks$[name] !== "function") throw new Error("Exported function not found.");

[dzegarra]

I partially figured out what was missing. If you read carefully the docs in the README file, you will find this phrase: "Include and exclude are enabled for storybook build where Babel is used. Not used in storybook dev. If include is omitted, all modules are covered."

I added then the include and exclude options, and I was able to build.

const config: StorybookConfig = {
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-interactions'),
    getAbsolutePath('@storybook/addon-designs'),
    {
      name: 'storybook-addon-module-mock',
      options: {
        include: [],
        exclude: ['**/node_modules/**'],
      },
    },
    './local-preset.js',
  ],
  // ...
};