Build error when configuring storybook

theoradicella · November 10, 2022, 12:23am

I want to configure Storybook NOT to have some essential addons, but as soon as I try to modify this on storybook.config.js, build breaks.

I have the following in storybook.config.js:

module.exports = {
  addons: [{ name: '@storybook/addon-essentials' ,options: { backgrounds: false } }, 'storybook-addon-themes'],
}

What I noticed is that if I change and eliminate all objects inside the addons array, the build works correctly:

module.exports = {
  addons: [ '@storybook/addon-essentials', 'storybook-addon-themes'],
}

But this is the only approach I found to disable essential addons, so it’s necessary.
The error I get is the following, seems to have something to do with webpack:

info => Using default Webpack5 setup
ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR! - configuration.entry should not contain the item ‘/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js’ twice.
ERR! → All modules are loaded upon startup. The last one is exported.
ERR! at validate (/Users/theo/Desktop/LevaData/leva-next/node_modules/schema-utils/dist/validate.js:105:11)
ERR! at validateSchema (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/validateSchema.js:78:2)
ERR! at create (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/webpack.js:111:24)
ERR! at webpack (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/webpack.js:158:32)
ERR! at f (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/index.js:64:16)
ERR! at starterGeneratorFn (/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:118:18)
ERR! at starterGeneratorFn.next ()
ERR! at Object.start (/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:34)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR! - configuration.entry should not contain the item ‘/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js’ twice.
ERR! → All modules are loaded upon startup. The last one is exported.
ERR! at validate (/Users/theo/Desktop/LevaData/leva-next/node_modules/schema-utils/dist/validate.js:105:11)
ERR! at validateSchema (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/validateSchema.js:78:2)
ERR! at create (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/webpack.js:111:24)
ERR! at webpack (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/webpack.js:158:32)
ERR! at f (/Users/theo/Desktop/LevaData/leva-next/node_modules/webpack/lib/index.js:64:16)
ERR! at starterGeneratorFn (/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:118:18)
ERR! at starterGeneratorFn.next ()
ERR! at Object.start (/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:34)
ERR! at async Promise.all (index 0)
ERR! at async storybookDevServer (/Users/theo/Desktop/LevaData/leva-next/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28) {
ERR! errors: [
ERR! {
ERR! keyword: ‘anyOf’,
ERR! dataPath: ‘.entry’,
ERR! schemaPath: ‘#/anyOf’,
ERR! params: {},
ERR! message: ‘should match some schema in anyOf’,
ERR! schema: [Array],
ERR! parentSchema: [Object],
ERR! data: [Array],
ERR! children: [Array]
ERR! }
ERR! ],
ERR! schema: {
ERR! definitions: {
ERR! Amd: [Object],
ERR! AssetFilterItemTypes: [Object],
ERR! AssetFilterTypes: [Object],
ERR! AssetGeneratorDataUrl: [Object],
ERR! AssetGeneratorDataUrlFunction: [Object],
ERR! AssetGeneratorDataUrlOptions: [Object],
ERR! AssetGeneratorOptions: [Object],
ERR! AssetInlineGeneratorOptions: [Object],
ERR! AssetModuleFilename: [Object],
ERR! AssetModuleOutputPath: [Object],
ERR! AssetParserDataUrlFunction: [Object],
ERR! AssetParserDataUrlOptions: [Object],
ERR! AssetParserOptions: [Object],
ERR! AssetResourceGeneratorOptions: [Object],
ERR! AuxiliaryComment: [Object],
ERR! Bail: [Object],
ERR! CacheOptions: [Object],
ERR! CacheOptionsNormalized: [Object],
ERR! Charset: [Object],
ERR! ChunkFilename: [Object],
ERR! ChunkFormat: [Object],
ERR! ChunkLoadTimeout: [Object],
ERR! ChunkLoading: [Object],
ERR! ChunkLoadingGlobal: [Object],
ERR! ChunkLoadingType: [Object],
ERR! Clean: [Object],
ERR! CleanOptions: [Object],
ERR! CompareBeforeEmit: [Object],
ERR! Context: [Object],
ERR! CrossOriginLoading: [Object],
ERR! CssChunkFilename: [Object],
ERR! CssExperimentOptions: [Object],
ERR! CssFilename: [Object],
ERR! CssGeneratorOptions: [Object],
ERR! CssParserOptions: [Object],
ERR! Dependencies: [Object],
ERR! DevServer: [Object],
ERR! DevTool: [Object],
ERR! DevtoolFallbackModuleFilenameTemplate: [Object],
ERR! DevtoolModuleFilenameTemplate: [Object],
ERR! DevtoolNamespace: [Object],
ERR! EmptyGeneratorOptions: [Object],
ERR! EmptyParserOptions: [Object],
ERR! EnabledChunkLoadingTypes: [Object],
ERR! EnabledLibraryTypes: [Object],
ERR! EnabledWasmLoadingTypes: [Object],
ERR! Entry: [Object],
ERR! EntryDescription: [Object],
ERR! EntryDescriptionNormalized: [Object],
ERR! EntryDynamic: [Object],
ERR! EntryDynamicNormalized: [Object],
ERR! EntryFilename: [Object],
ERR! EntryItem: [Object],
ERR! EntryNormalized: [Object],
ERR! EntryObject: [Object],
ERR! EntryRuntime: [Object],
ERR! EntryStatic: [Object],
ERR! EntryStaticNormalized: [Object],
ERR! EntryUnnamed: [Object],
ERR! Environment: [Object],
ERR! Experiments: [Object],
ERR! ExperimentsCommon: [Object],
ERR! ExperimentsNormalized: [Object],
ERR! ExternalItem: [Object],
ERR! ExternalItemFunctionData: [Object],
ERR! ExternalItemValue: [Object],
ERR! Externals: [Object],
ERR! ExternalsPresets: [Object],
ERR! ExternalsType: [Object],
ERR! FileCacheOptions: [Object],
ERR! Filename: [Object],
ERR! FilenameTemplate: [Object],
ERR! FilterItemTypes: [Object],
ERR! FilterTypes: [Object],
ERR! GeneratorOptionsByModuleType: [Object],
ERR! GlobalObject: [Object],
ERR! HashDigest: [Object],
ERR! HashDigestLength: [Object],
ERR! HashFunction: [Object],
ERR! HashSalt: [Object],
ERR! HotUpdateChunkFilename: [Object],
ERR! HotUpdateGlobal: [Object],
ERR! HotUpdateMainFilename: [Object],
ERR! HttpUriAllowedUris: [Object],
ERR! HttpUriOptions: [Object],
ERR! HttpUriOptionsAllowedUris: [Object],
ERR! IgnoreWarnings: [Object],
ERR! IgnoreWarningsNormalized: [Object],
ERR! Iife: [Object],
ERR! ImportFunctionName: [Object],
ERR! ImportMetaName: [Object],
ERR! InfrastructureLogging: [Object],
ERR! JavascriptParserOptions: [Object],
ERR! Layer: [Object],
ERR! LazyCompilationDefaultBackendOptions: [Object],
ERR! LazyCompilationOptions: [Object],
ERR! Library: [Object],
ERR! LibraryCustomUmdCommentObject: [Object],
ERR! LibraryCustomUmdObject: [Object],
ERR! LibraryExport: [Object],
ERR! LibraryName: [Object],
ERR! LibraryOptions: [Object],
ERR! LibraryType: [Object],
ERR! Loader: [Object],
ERR! MemoryCacheOptions: [Object],
ERR! Mode: [Object],
ERR! ModuleFilterItemTypes: [Object],
ERR! ModuleFilterTypes: [Object],
ERR! ModuleOptions: [Object],
ERR! ModuleOptionsNormalized: [Object],
ERR! Name: [Object],
ERR! NoParse: [Object],
ERR! Node: [Object],
ERR! NodeOptions: [Object],
ERR! Optimization: [Object],
ERR! OptimizationRuntimeChunk: [Object],
ERR! OptimizationRuntimeChunkNormalized: [Object],
ERR! OptimizationSplitChunksCacheGroup: [Object],
ERR! OptimizationSplitChunksGetCacheGroups: [Object],
ERR! OptimizationSplitChunksOptions: [Object],
ERR! OptimizationSplitChunksSizes: [Object],
ERR! Output: [Object],
ERR! OutputModule: [Object],
ERR! OutputNormalized: [Object],
ERR! Parallelism: [Object],
ERR! ParserOptionsByModuleType: [Object],
ERR! Path: [Object],
ERR! Pathinfo: [Object],
ERR! Performance: [Object],
ERR! PerformanceOptions: [Object],
ERR! Plugins: [Object],
ERR! Profile: [Object],
ERR! PublicPath: [Object],
ERR! RawPublicPath: [Object],
ERR! RecordsInputPath: [Object],
ERR! RecordsOutputPath: [Object],
ERR! RecordsPath: [Object],
ERR! Resolve: [Object],
ERR! ResolveAlias: [Object],
ERR! ResolveLoader: [Object],
ERR! ResolveOptions: [Object],
ERR! ResolvePluginInstance: [Object],
ERR! RuleSetCondition: [Object],
ERR! RuleSetConditionAbsolute: [Object],
ERR! RuleSetConditionOrConditions: [Object],
ERR! RuleSetConditionOrConditionsAbsolute: [Object],
ERR! RuleSetConditions: [Object],
ERR! RuleSetConditionsAbsolute: [Object],
ERR! RuleSetLoader: [Object],
ERR! RuleSetLoaderOptions: [Object],
ERR! RuleSetLogicalConditions: [Object],
ERR! RuleSetLogicalConditionsAbsolute: [Object],
ERR! RuleSetRule: [Object],
ERR! RuleSetRules: [Object],
ERR! RuleSetUse: [Object],
ERR! RuleSetUseItem: [Object],
ERR! ScriptType: [Object],
ERR! SnapshotOptions: [Object],
ERR! SourceMapFilename: [Object],
ERR! SourcePrefix: [Object],
ERR! StatsOptions: [Object],
ERR! StatsValue: [Object],
ERR! StrictModuleErrorHandling: [Object],
ERR! StrictModuleExceptionHandling: [Object],
ERR! Target: [Object],
ERR! TrustedTypes: [Object],
ERR! UmdNamedDefine: [Object],
ERR! UniqueName: [Object],
ERR! WarningFilterItemTypes: [Object],
ERR! WarningFilterTypes: [Object],
ERR! WasmLoading: [Object],
ERR! WasmLoadingType: [Object],
ERR! Watch: [Object],
ERR! WatchOptions: [Object],
ERR! WebassemblyModuleFilename: [Object],
ERR! WebpackOptionsNormalized: [Object],
ERR! WebpackPluginFunction: [Object],
ERR! WebpackPluginInstance: [Object]
ERR! },
ERR! title: ‘WebpackOptions’,
ERR! description: ‘Options object as provided by the user.’,
ERR! type: ‘object’,
ERR! additionalProperties: false,
ERR! properties: {
ERR! amd: [Object],
ERR! bail: [Object],
ERR! cache: [Object],
ERR! context: [Object],
ERR! dependencies: [Object],
ERR! devServer: [Object],
ERR! devtool: [Object],
ERR! entry: [Object],
ERR! experiments: [Object],
ERR! externals: [Object],
ERR! externalsPresets: [Object],
ERR! externalsType: [Object],
ERR! ignoreWarnings: [Object],
ERR! infrastructureLogging: [Object],
ERR! loader: [Object],
ERR! mode: [Object],
ERR! module: [Object],
ERR! name: [Object],
ERR! node: [Object],
ERR! optimization: [Object],
ERR! output: [Object],
ERR! parallelism: [Object],
ERR! performance: [Object],
ERR! plugins: [Object],
ERR! profile: [Object],
ERR! recordsInputPath: [Object],
ERR! recordsOutputPath: [Object],
ERR! recordsPath: [Object],
ERR! resolve: [Object],
ERR! resolveLoader: [Object],
ERR! snapshot: [Object],
ERR! stats: [Object],
ERR! target: [Object],
ERR! watch: [Object],
ERR! watchOptions: [Object]
ERR! }
ERR! },
ERR! headerName: ‘Webpack’,
ERR! baseDataPath: ‘configuration’,
ERR! postFormatter: [Function: postFormatter]
ERR! }

Thanks in advance!

theoradicella · November 10, 2022, 12:39am

I found that commenting the line 29 where essential storybook addons are configured in the main.js file inside node_modules solves the issue:
So probably when I’m trying to override those configs on storybook.config.js it throws an error because of duplicated addons configuration objects. Is there any way to solve this without touching node_modules?

daveisdead · October 17, 2023, 9:53pm

For others that encounter this error, adding
config.entry = Array.from(new Set(config.entry));
into your storybook webpack config will fix this. The error happens because some entries are being loaded twice. Not sure how else to fix this