diff --git a/packages/react/src/generators/library/lib/create-files.ts b/packages/react/src/generators/library/lib/create-files.ts index 8dc320d435..15fc967ccd 100644 --- a/packages/react/src/generators/library/lib/create-files.ts +++ b/packages/react/src/generators/library/lib/create-files.ts @@ -5,7 +5,6 @@ import { names, offsetFromRoot, toJS, - updateJson, } from '@nrwl/devkit'; import { getRelativePathToRootTsConfig } from '@nrwl/workspace/src/utilities/typescript'; diff --git a/packages/react/src/generators/storybook-configuration/configuration.ts b/packages/react/src/generators/storybook-configuration/configuration.ts index 5e4537b85d..8b23e8cc7b 100644 --- a/packages/react/src/generators/storybook-configuration/configuration.ts +++ b/packages/react/src/generators/storybook-configuration/configuration.ts @@ -3,6 +3,7 @@ import storiesGenerator from '../stories/stories'; import { convertNxGenerator, ensurePackage, + joinPathFragments, logger, readProjectConfiguration, Tree, @@ -53,6 +54,42 @@ export async function storybookConfigurationGenerator( } } + /** + * If it's library and there's no .babelrc file, + * we need to generate one if it's not using vite. + * + * The reason is that it will be using webpack for Storybook, + * and webpack needs the babelrc file to be present. + * + * The reason the babelrc file is not there in the first place, + * is because the vitest generator deletes it, since it + * does not need it. + * See: + * packages/react/src/generators/library/lib/create-files.ts#L42 + */ + + if ( + bundler !== 'vite' && + projectConfig.projectType === 'library' && + !host.exists(joinPathFragments(projectConfig.root, '.babelrc')) + ) { + host.write( + joinPathFragments(projectConfig.root, '.babelrc'), + JSON.stringify({ + presets: [ + [ + '@nrwl/react/babel', + { + runtime: 'automatic', + useBuiltIns: 'usage', + }, + ], + ], + plugins: [], + }) + ); + } + const installTask = await configurationGenerator(host, { name: schema.name, uiFramework: '@storybook/react',