fix(react-native): change build target to be crystalized (#30151)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

.github/workflows/ci.yml

@@ -37,6 +37,8 @@ jobs:
 
       - name: Set SHAs
         uses: nrwl/nx-set-shas@v4
+        with:
+          main-branch-name: 'master'
 
       - name: Start CI Run
         run: npx nx-cloud@next start-ci-run --distribute-on="./.nx/workflows/dynamic-changesets.yaml" --stop-agents-after="e2e"
@@ -147,6 +149,8 @@ jobs:
 
       - name: Set SHAs
         uses: nrwl/nx-set-shas@v4
+        with:
+          main-branch-name: 'master'
         
       - name: Run E2E Tests for macOS
         run: |

docs/generated/packages/react-native/generators/component.json

@@ -59,6 +59,12 @@
         "alias": "C",
         "description": "Use class components instead of functional component.",
         "default": false
+      },
+      "skipFormat": {
+        "description": "Skip formatting files.",
+        "type": "boolean",
+        "default": false,
+        "x-priority": "internal"
       }
     },
     "required": ["path"],

packages/expo/src/generators/component/component.ts

@@ -53,7 +53,9 @@ function addExportsToBarrel(host: Tree, options: NormalizedSchema) {
 
   if (options.export && !isApp) {
     const indexFilePath = joinPathFragments(
-      options.projectSourceRoot,
+      ...(options.projectSourceRoot
+        ? [options.projectSourceRoot]
+        : [options.projectRoot, 'src']),
       options.fileExtensionType === 'js' ? 'index.js' : 'index.ts'
     );
 

packages/expo/src/generators/component/lib/normalize-options.ts

@@ -15,6 +15,7 @@ export interface NormalizedSchema extends Omit<Schema, 'js'> {
   className: string;
   filePath: string;
   projectName: string;
+  projectRoot: string;
 }
 
 export async function normalizeOptions(
@@ -63,5 +64,6 @@ export async function normalizeOptions(
     filePath,
     projectSourceRoot,
     projectName,
+    projectRoot: root,
   };
 }

packages/expo/src/generators/library/files/lib/package.json.template

@@ -1,5 +0,0 @@
-{
-  "name": "<%= projectName %>",
-  "version": "0.0.1",
-  "main": "<%= appMain %>"
-}

packages/expo/src/generators/library/lib/normalize-options.ts

@@ -14,7 +14,6 @@ export interface NormalizedSchema extends Schema {
   projectRoot: string;
   routePath: string;
   parsedTags: string[];
-  appMain: string;
   isUsingTsSolutionConfig: boolean;
 }
 
@@ -43,7 +42,6 @@ export async function normalizeOptions(
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())
     : [];
-  const appMain = options.js ? 'src/index.js' : 'src/index.ts';
 
   const isUsingTsSolutionConfig = isUsingTsSolutionSetup(host);
   const normalized: NormalizedSchema = {
@@ -52,12 +50,11 @@ export async function normalizeOptions(
     routePath: `/${projectNames.projectSimpleName}`,
     name: projectName,
     projectName: isUsingTsSolutionConfig
-      ? getImportPath(host, projectName)
+      ? importPath ?? getImportPath(host, projectName)
       : projectName,
     projectRoot,
     parsedTags,
     importPath,
-    appMain,
     isUsingTsSolutionConfig,
   };
 

packages/expo/src/generators/library/library.spec.ts

@@ -10,7 +10,7 @@ import {
 } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { Linter } from '@nx/eslint';
-
+import { hasPlugin as hasRollupPlugin } from '@nx/rollup/src/utils/has-plugin';
 import { expoLibraryGenerator } from './library';
 import { Schema } from './schema';
 
@@ -333,40 +333,27 @@ describe('lib', () => {
   });
 
   describe('--buildable', () => {
-    it('should have a builder defined', async () => {
+    it('should add a rollup.config.cjs', async () => {
       await expoLibraryGenerator(appTree, {
         ...defaultSchema,
         buildable: true,
       });
 
-      const projects = getProjects(appTree);
+      expect(appTree.exists('my-lib/rollup.config.cjs')).toBeTruthy();
-
+      expect(hasRollupPlugin(appTree)).toBeTruthy();
-      expect(projects.get('my-lib').targets.build).toBeDefined();
     });
   });
 
   describe('--publishable', () => {
-    it('should add build architect', async () => {
+    it('should add a rollup.config.cjs', async () => {
       await expoLibraryGenerator(appTree, {
         ...defaultSchema,
         publishable: true,
         importPath: '@proj/my-lib',
       });
 
-      const projects = getProjects(appTree);
+      expect(appTree.exists('my-lib/rollup.config.cjs')).toBeTruthy();
-
+      expect(hasRollupPlugin(appTree)).toBeTruthy();
-      expect(projects.get('my-lib').targets.build).toMatchObject({
-        executor: '@nx/rollup:rollup',
-        outputs: ['{options.outputPath}'],
-        options: {
-          external: ['react/jsx-runtime', 'react-native', 'react', 'react-dom'],
-          entryFile: 'my-lib/src/index.ts',
-          outputPath: 'dist/my-lib',
-          project: 'my-lib/package.json',
-          tsConfig: 'my-lib/tsconfig.lib.json',
-          rollupConfig: '@nx/react/plugins/bundle-rollup',
-        },
-      });
     });
 
     it('should fail if no importPath is provided with publishable', async () => {
@@ -516,6 +503,11 @@ describe('lib', () => {
           },
           "main": "./src/index.ts",
           "name": "@proj/my-lib",
+          "nx": {},
+          "peerDependencies": {
+            "react": "~18.3.1",
+            "react-native": "0.76.3",
+          },
           "types": "./src/index.ts",
           "version": "0.0.1",
         }
@@ -528,6 +520,8 @@ describe('lib', () => {
           "main",
           "types",
           "exports",
+          "nx",
+          "peerDependencies",
         ]
       `);
       expect(readJson(appTree, 'my-lib/tsconfig.json')).toMatchInlineSnapshot(`
@@ -636,53 +630,20 @@ describe('lib', () => {
         {
           "exports": {
             ".": {
-              "default": "./dist/index.esm.js",
+              "default": "./src/index.ts",
-              "import": "./dist/index.esm.js",
+              "import": "./src/index.ts",
               "types": "./dist/index.esm.d.ts",
             },
             "./package.json": "./package.json",
           },
-          "main": "./dist/index.esm.js",
+          "main": "./src/index.ts",
           "module": "./dist/index.esm.js",
           "name": "@proj/my-lib",
-          "nx": {
+          "nx": {},
-            "projectType": "library",
-            "sourceRoot": "my-lib/src",
-            "tags": [],
-            "targets": {
-              "build": {
-                "executor": "@nx/rollup:rollup",
-                "options": {
-                  "assets": [
-                    {
-                      "glob": "my-lib/README.md",
-                      "input": ".",
-                      "output": ".",
-                    },
-                  ],
-                  "entryFile": "my-lib/src/index.ts",
-                  "external": [
-                    "react/jsx-runtime",
-                    "react-native",
-                    "react",
-                    "react-dom",
-                  ],
-                  "outputPath": "dist/my-lib",
-                  "project": "my-lib/package.json",
-                  "rollupConfig": "@nx/react/plugins/bundle-rollup",
-                  "tsConfig": "my-lib/tsconfig.lib.json",
-                },
-                "outputs": [
-                  "{options.outputPath}",
-                ],
-              },
-            },
-          },
           "peerDependencies": {
             "react": "~18.3.1",
             "react-native": "0.76.3",
           },
-          "type": "module",
           "types": "./dist/index.esm.d.ts",
           "version": "0.0.1",
         }

packages/expo/src/generators/library/library.ts

@@ -1,6 +1,5 @@
 import {
   addProjectConfiguration,
-  ensurePackage,
   formatFiles,
   generateFiles,
   GeneratorCallback,
@@ -13,7 +12,6 @@ import {
   toJS,
   Tree,
   updateJson,
-  updateProjectConfiguration,
   writeJson,
 } from '@nx/devkit';
 
@@ -25,22 +23,22 @@ import {
 import init from '../init/init';
 import { addLinting } from '../../utils/add-linting';
 import { addJest } from '../../utils/add-jest';
-import {
-  nxVersion,
-  reactNativeVersion,
-  reactVersion,
-} from '../../utils/versions';
 import { NormalizedSchema, normalizeOptions } from './lib/normalize-options';
 import { Schema } from './schema';
 import { ensureDependencies } from '../../utils/ensure-dependencies';
 import { initRootBabelConfig } from '../../utils/init-root-babel-config';
-import { addBuildTargetDefaults } from '@nx/devkit/src/generators/target-defaults-utils';
 import { logShowProjectCommand } from '@nx/devkit/src/utils/log-show-project-command';
 import {
   addProjectToTsSolutionWorkspace,
   updateTsconfigFiles,
 } from '@nx/js/src/utils/typescript/ts-solution-setup';
 import { sortPackageJsonFields } from '@nx/js/src/utils/package-json/sort-fields';
+import { PackageJson } from 'nx/src/utils/package-json';
+import { addRollupBuildTarget } from '@nx/react/src/generators/library/lib/add-rollup-build-target';
+import { getRelativeCwd } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+import { expoComponentGenerator } from '../component/component';
+import { relative } from 'path';
+import { reactNativeVersion, reactVersion } from '../../utils/versions';
 
 export async function expoLibraryGenerator(
   host: Tree,
@@ -109,16 +107,26 @@ export async function expoLibraryGeneratorInternal(
   );
   tasks.push(jestTask);
 
-  if (options.publishable || options.buildable) {
+  const relativeCwd = getRelativeCwd();
-    updateLibPackageNpmScope(host, options);
+  const path = joinPathFragments(
-  }
+    options.projectRoot,
+    'src/lib',
+    options.fileName
+  );
+  const componentTask = await expoComponentGenerator(host, {
+    path: relativeCwd ? relative(relativeCwd, path) : path,
+    skipTests: options.unitTestRunner === 'none',
+    export: true,
+    skipFormat: true,
+    js: options.js,
+  });
+  tasks.push(() => componentTask);
 
   if (!options.skipTsConfig && !options.isUsingTsSolutionConfig) {
     addTsConfigPath(host, options.importPath, [
       joinPathFragments(
         options.projectRoot,
-        './src',
+        options.js ? './src/index.js' : './src/index.ts'
-        'index.' + (options.js ? 'js' : 'ts')
       ),
     ]);
   }
@@ -168,81 +176,53 @@ async function addProject(
   };
 
   if (options.isUsingTsSolutionConfig) {
-    const sourceEntry = !options.buildable
-      ? options.js
-        ? './src/index.js'
-        : './src/index.ts'
-      : undefined;
     writeJson(host, joinPathFragments(options.projectRoot, 'package.json'), {
       name: options.projectName,
       version: '0.0.1',
-      main: sourceEntry,
+      ...determineEntryFields(options),
-      types: sourceEntry,
+      nx: {
-      // For buildable libraries, the entries are configured by the bundler (i.e. Rollup).
+        tags: options.parsedTags?.length ? options.parsedTags : undefined,
-      exports: options.buildable
-        ? undefined
-        : {
-            './package.json': './package.json',
-            '.': options.js
-              ? './src/index.js'
-              : {
-                  types: './src/index.ts',
-                  import: './src/index.ts',
-                  default: './src/index.ts',
       },
+      files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
+      peerDependencies: {
+        react: reactVersion,
+        'react-native': reactNativeVersion,
       },
-
-      nx: options.parsedTags?.length
-        ? {
-            tags: options.parsedTags,
-          }
-        : undefined,
     });
   } else {
     addProjectConfiguration(host, options.name, project);
   }
 
-  if (!options.publishable && !options.buildable) {
+  if (options.publishable || options.buildable) {
-    return () => {};
+    const external = new Set([
-  }
+      'react/jsx-runtime',
-
+      'react-native',
-  const { configurationGenerator } = ensurePackage<typeof import('@nx/rollup')>(
+      'react',
-    '@nx/rollup',
+      'react-dom',
-    nxVersion
+    ]);
-  );
+    const rollupTask = await addRollupBuildTarget(
-  const rollupConfigTask = await configurationGenerator(host, {
+      host,
-    ...options,
-    project: options.projectName,
-    skipFormat: true,
-  });
-
-  const external = ['react/jsx-runtime', 'react-native', 'react', 'react-dom'];
-
-  addBuildTargetDefaults(host, '@nx/rollup:rollup');
-
-  project.targets.build = {
-    executor: '@nx/rollup:rollup',
-    outputs: ['{options.outputPath}'],
-    options: {
-      outputPath: `dist/${options.projectRoot}`,
-      tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
-      project: `${options.projectRoot}/package.json`,
-      entryFile: maybeJs(options, `${options.projectRoot}/src/index.ts`),
-      external,
-      rollupConfig: `@nx/react/plugins/bundle-rollup`,
-      assets: [
       {
-          glob: `${options.projectRoot}/README.md`,
+        ...options,
-          input: '.',
+        name: options.projectName,
-          output: '.',
+        format: ['cjs', 'esm'],
-        },
+        style: 'none',
-      ],
+        js: options.js,
+        skipFormat: true,
       },
+      external
+    );
+    updateJson(host, `${options.projectRoot}/package.json`, (json) => {
+      json.peerDependencies = {
+        ...json.peerDependencies,
+        react: reactVersion,
+        'react-native': reactNativeVersion,
       };
-
+      return json;
-  updateProjectConfiguration(host, options.projectName, project);
+    });
-
+    return rollupTask;
-  return rollupConfigTask;
+  }
+  return () => {};
 }
 
 function updateTsConfig(tree: Tree, options: NormalizedSchema) {
@@ -282,14 +262,6 @@ function createFiles(host: Tree, options: NormalizedSchema) {
     }
   );
 
-  if (
-    !options.publishable &&
-    !options.buildable &&
-    !options.isUsingTsSolutionConfig
-  ) {
-    host.delete(`${options.projectRoot}/package.json`);
-  }
-
   if (options.js) {
     toJS(host);
   }
@@ -297,21 +269,23 @@ function createFiles(host: Tree, options: NormalizedSchema) {
   updateTsConfig(host, options);
 }
 
-function updateLibPackageNpmScope(host: Tree, options: NormalizedSchema) {
+function determineEntryFields(
-  return updateJson(host, `${options.projectRoot}/package.json`, (json) => {
+  options: NormalizedSchema
-    json.name = options.importPath;
+): Pick<PackageJson, 'main' | 'types' | 'exports'> {
-    json.peerDependencies = {
+  return {
-      react: reactVersion,
+    main: options.js ? './src/index.js' : './src/index.ts',
-      'react-native': reactNativeVersion,
+    types: options.js ? './src/index.js' : './src/index.ts',
+    exports: {
+      '.': options.js
+        ? './src/index.js'
+        : {
+            types: './src/index.ts',
+            import: './src/index.ts',
+            default: './src/index.ts',
+          },
+      './package.json': './package.json',
+    },
   };
-    return json;
-  });
-}
-
-function maybeJs(options: NormalizedSchema, path: string): string {
-  return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-    ? path.replace(/\.tsx?$/, '.js')
-    : path;
 }
 
 export default expoLibraryGenerator;

packages/react-native/src/generators/component/component.ts

@@ -22,7 +22,9 @@ export async function reactNativeComponentGenerator(
 
   addExportsToBarrel(host, options);
 
+  if (!options.skipFormat) {
     await formatFiles(host);
+  }
 }
 
 function createComponentFiles(host: Tree, options: NormalizedSchema) {
@@ -59,7 +61,9 @@ function addExportsToBarrel(host: Tree, options: NormalizedSchema) {
 
   if (options.export && !isApp) {
     const indexFilePath = joinPathFragments(
-      options.projectSourceRoot,
+      ...(options.projectSourceRoot
+        ? [options.projectSourceRoot]
+        : [options.projectRoot, 'src']),
       options.fileExtensionType === 'js' ? 'index.js' : 'index.ts'
     );
 

packages/react-native/src/generators/component/lib/normalize-options.ts

@@ -15,6 +15,7 @@ export interface NormalizedSchema extends Omit<Schema, 'js'> {
   fileExtension: string;
   fileExtensionType: FileExtensionType;
   projectName: string;
+  projectRoot: string;
 }
 
 export async function normalizeOptions(
@@ -65,5 +66,6 @@ export async function normalizeOptions(
     fileExtensionType,
     projectSourceRoot,
     projectName,
+    projectRoot: root,
   };
 }

packages/react-native/src/generators/component/schema.d.ts

@@ -7,6 +7,7 @@ export interface Schema {
   skipTests?: boolean;
   export?: boolean;
   classComponent?: boolean;
+  skipFormat?: boolean;
 
   /**
    * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.

packages/react-native/src/generators/component/schema.json

@@ -59,6 +59,12 @@
       "alias": "C",
       "description": "Use class components instead of functional component.",
       "default": false
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
     }
   },
   "required": ["path"]

packages/react-native/src/generators/library/files/lib/package.json.template

@@ -1,4 +0,0 @@
-{
-  "name": "<%= name %>",
-  "version": "0.0.1"
-}

packages/react-native/src/generators/library/lib/normalize-options.ts

@@ -51,7 +51,7 @@ export async function normalizeOptions(
     fileName: projectName,
     routePath: `/${projectNames.projectSimpleName}`,
     name: isUsingTsSolutionConfig
-      ? getImportPath(host, projectName)
+      ? options.importPath ?? getImportPath(host, projectName)
       : projectName,
     projectRoot,
     parsedTags,

packages/react-native/src/generators/library/library.spec.ts

@@ -10,6 +10,7 @@ import {
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import libraryGenerator from './library';
 import { Linter } from '@nx/eslint';
+import { hasPlugin as hasRollupPlugin } from '@nx/rollup/src/utils/has-plugin';
 import { Schema } from './schema';
 
 describe('lib', () => {
@@ -309,40 +310,27 @@ describe('lib', () => {
   });
 
   describe('--buildable', () => {
-    it('should have a builder defined', async () => {
+    it('should add a rollup.config.cjs', async () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
         buildable: true,
       });
 
-      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+      expect(appTree.exists('my-lib/rollup.config.cjs')).toBeTruthy();
-
+      expect(hasRollupPlugin(appTree)).toBeTruthy();
-      expect(projectConfiguration.targets.build).toBeDefined();
     });
   });
 
   describe('--publishable', () => {
-    it('should add build architect', async () => {
+    it('should add a rollup.config.cjs', async () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
         publishable: true,
         importPath: '@proj/my-lib',
       });
 
-      const projectConfiguration = readProjectConfiguration(appTree, 'my-lib');
+      expect(appTree.exists('my-lib/rollup.config.cjs')).toBeTruthy();
-
+      expect(hasRollupPlugin(appTree)).toBeTruthy();
-      expect(projectConfiguration.targets.build).toMatchObject({
-        executor: '@nx/rollup:rollup',
-        outputs: ['{options.outputPath}'],
-        options: {
-          external: ['react/jsx-runtime', 'react-native', 'react', 'react-dom'],
-          entryFile: 'my-lib/src/index.ts',
-          outputPath: 'dist/my-lib',
-          project: 'my-lib/package.json',
-          tsConfig: 'my-lib/tsconfig.lib.json',
-          rollupConfig: '@nx/react/plugins/bundle-rollup',
-        },
-      });
     });
 
     it('should fail if no importPath is provided with publishable', async () => {
@@ -492,16 +480,26 @@ describe('lib', () => {
         ]
       `);
       // Make sure keys are in idiomatic order
-      expect(Object.keys(readJson(appTree, 'my-lib/package.json')))
+      expect(readJson(appTree, 'my-lib/package.json')).toMatchInlineSnapshot(`
-        .toMatchInlineSnapshot(`
+        {
-        [
+          "exports": {
-          "name",
+            ".": {
-          "version",
+              "default": "./src/index.ts",
-          "main",
+              "import": "./src/index.ts",
-          "types",
+              "types": "./src/index.ts",
-          "exports",
+            },
-          "nx",
+            "./package.json": "./package.json",
-        ]
+          },
+          "main": "./src/index.ts",
+          "name": "@proj/my-lib",
+          "nx": {},
+          "peerDependencies": {
+            "react": "~18.3.1",
+            "react-native": "~0.76.3",
+          },
+          "types": "./src/index.ts",
+          "version": "0.0.1",
+        }
       `);
       expect(readJson(appTree, 'my-lib/tsconfig.json')).toMatchInlineSnapshot(`
         {

packages/react-native/src/generators/library/library.ts

@@ -1,6 +1,5 @@
 import {
   addProjectConfiguration,
-  ensurePackage,
   formatFiles,
   generateFiles,
   GeneratorCallback,
@@ -13,7 +12,6 @@ import {
   toJS,
   Tree,
   updateJson,
-  updateProjectConfiguration,
   writeJson,
 } from '@nx/devkit';
 
@@ -25,11 +23,7 @@ import {
 import init from '../init/init';
 import { addLinting } from '../../utils/add-linting';
 import { addJest } from '../../utils/add-jest';
-import {
+import componentGenerator from '../component/component';
-  nxVersion,
-  reactNativeVersion,
-  reactVersion,
-} from '../../utils/versions';
 import { NormalizedSchema, normalizeOptions } from './lib/normalize-options';
 import { Schema } from './schema';
 import { ensureDependencies } from '../../utils/ensure-dependencies';
@@ -38,9 +32,17 @@ import {
   addProjectToTsSolutionWorkspace,
   updateTsconfigFiles,
 } from '@nx/js/src/utils/typescript/ts-solution-setup';
-import { getImportPath } from '@nx/js/src/utils/get-import-path';
-import type { PackageJson } from 'nx/src/utils/package-json';
 import { sortPackageJsonFields } from '@nx/js/src/utils/package-json/sort-fields';
+import {
+  addReleaseConfigForNonTsSolution,
+  addReleaseConfigForTsSolution,
+  releaseTasks,
+} from '@nx/js/src/generators/library/utils/add-release-config';
+import { PackageJson } from 'nx/src/utils/package-json';
+import { addRollupBuildTarget } from '@nx/react/src/generators/library/lib/add-rollup-build-target';
+import { getRelativeCwd } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+import { relative } from 'path';
+import { reactNativeVersion, reactVersion } from '../../utils/versions';
 
 export async function reactNativeLibraryGenerator(
   host: Tree,
@@ -106,9 +108,20 @@ export async function reactNativeLibraryGeneratorInternal(
   );
   tasks.push(jestTask);
 
-  if (options.publishable || options.buildable) {
+  const relativeCwd = getRelativeCwd();
-    updateLibPackageNpmScope(host, options);
+  const path = joinPathFragments(
-  }
+    options.projectRoot,
+    'src/lib',
+    options.fileName
+  );
+  const componentTask = await componentGenerator(host, {
+    path: relativeCwd ? relative(relativeCwd, path) : path,
+    skipTests: options.unitTestRunner === 'none',
+    export: true,
+    skipFormat: true,
+    js: options.js,
+  });
+  tasks.push(() => componentTask);
 
   if (!options.skipTsConfig && !options.isUsingTsSolutionConfig) {
     addTsConfigPath(host, options.importPath, [
@@ -167,10 +180,6 @@ async function addProject(
     targets: {},
   };
 
-  const packageJsonPath = joinPathFragments(
-    options.projectRoot,
-    'package.json'
-  );
   if (options.isUsingTsSolutionConfig) {
     writeJson(host, joinPathFragments(options.projectRoot, 'package.json'), {
       name: options.name,
@@ -179,61 +188,45 @@ async function addProject(
       nx: {
         tags: options.parsedTags?.length ? options.parsedTags : undefined,
       },
+      files: options.publishable ? ['dist', '!**/*.tsbuildinfo'] : undefined,
+      peerDependencies: {
+        react: reactVersion,
+        'react-native': reactNativeVersion,
+      },
     });
   } else {
     addProjectConfiguration(host, options.name, project);
   }
 
-  if (!options.publishable && !options.buildable) {
+  if (options.publishable || options.buildable) {
-    return () => {};
+    const external = new Set([
-  }
+      'react/jsx-runtime',
-
+      'react-native',
-  const { configurationGenerator } = ensurePackage<typeof import('@nx/rollup')>(
+      'react',
-    '@nx/rollup',
+      'react-dom',
-    nxVersion
+    ]);
-  );
+    const rollupTask = await addRollupBuildTarget(
-  const rollupConfigTask = await configurationGenerator(host, {
+      host,
+      {
         ...options,
-    project: options.name,
+        format: ['cjs', 'esm'],
+        style: 'none',
+        js: options.js,
         skipFormat: true,
-  });
+      },
-
+      external
-  updateJson(host, packageJsonPath, (json) => {
+    );
-    if (json.type === 'module') {
+    updateJson(host, `${options.projectRoot}/package.json`, (json) => {
-      // The @nx/rollup:configuration generator can set the type to 'module' which would
+      json.peerDependencies = {
-      // potentially break this library.
+        ...json.peerDependencies,
-      delete json.type;
+        react: reactVersion,
-    }
+        'react-native': reactNativeVersion,
+      };
       return json;
     });
-
+    return rollupTask;
-  const external = ['react/jsx-runtime', 'react-native', 'react', 'react-dom'];
+  }
-
+  return () => {};
-  project.targets.build = {
-    executor: '@nx/rollup:rollup',
-    outputs: ['{options.outputPath}'],
-    options: {
-      outputPath: options.isUsingTsSolutionConfig
-        ? `${options.projectRoot}/dist`
-        : `dist/${options.projectRoot}`,
-      tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
-      project: `${options.projectRoot}/package.json`,
-      entryFile: maybeJs(options, `${options.projectRoot}/src/index.ts`),
-      external,
-      rollupConfig: `@nx/react/plugins/bundle-rollup`,
-      assets: [
-        {
-          glob: `${options.projectRoot}/README.md`,
-          input: '.',
-          output: '.',
-        },
-      ],
-    },
-  };
-
-  updateProjectConfiguration(host, options.name, project);
-
-  return rollupConfigTask;
 }
 
 function updateTsConfig(tree: Tree, options: NormalizedSchema) {
@@ -276,10 +269,6 @@ function createFiles(host: Tree, options: NormalizedSchema) {
     }
   );
 
-  if (!options.publishable && !options.buildable) {
-    host.delete(`${options.projectRoot}/package.json`);
-  }
-
   if (options.js) {
     toJS(host);
   }
@@ -287,30 +276,9 @@ function createFiles(host: Tree, options: NormalizedSchema) {
   updateTsConfig(host, options);
 }
 
-function updateLibPackageNpmScope(host: Tree, options: NormalizedSchema) {
-  return updateJson(host, `${options.projectRoot}/package.json`, (json) => {
-    json.name = options.importPath;
-    json.peerDependencies = {
-      react: reactVersion,
-      'react-native': reactNativeVersion,
-    };
-    return json;
-  });
-}
-
-function maybeJs(options: NormalizedSchema, path: string): string {
-  return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-    ? path.replace(/\.tsx?$/, '.js')
-    : path;
-}
-
 function determineEntryFields(
   options: NormalizedSchema
 ): Pick<PackageJson, 'main' | 'types' | 'exports'> {
-  if (options.buildable) {
-    return {};
-  }
-
   return {
     main: options.js ? './src/index.js' : './src/index.ts',
     types: options.js ? './src/index.js' : './src/index.ts',

packages/react/src/generators/library/lib/add-rollup-build-target.ts

@@ -21,7 +21,8 @@ import { NormalizedSchema } from '../schema';
 
 export async function addRollupBuildTarget(
   host: Tree,
-  options: NormalizedSchema
+  options: NormalizedSchema & { format?: Array<'esm' | 'cjs'> },
+  external: Set<String> = new Set(['react', 'react-dom'])
 ) {
   const tasks: GeneratorCallback[] = [];
 
@@ -51,12 +52,10 @@ export async function addRollupBuildTarget(
     );
   }
 
-  const external: string[] = ['react', 'react-dom'];
-
   if (options.style === '@emotion/styled') {
-    external.push('@emotion/react/jsx-runtime');
+    external.add('@emotion/react/jsx-runtime');
   } else {
-    external.push('react/jsx-runtime');
+    external.add('react/jsx-runtime');
   }
 
   const nxJson = readNxJson(host);
@@ -87,8 +86,8 @@ module.exports = withNx(
     }',
     tsConfig: './tsconfig.lib.json',
     compiler: '${options.compiler ?? 'babel'}',
-    external: ${JSON.stringify(external)},
+    external: ${JSON.stringify(Array.from(external))},
-    format: ['esm'],
+    format: ${JSON.stringify(options.format ?? ['esm'])},
     assets:[{ input: '.', output: '.', glob: 'README.md'}],
   }, {
     // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
@@ -117,7 +116,7 @@ module.exports = withNx(
         tsConfig: `${options.projectRoot}/tsconfig.lib.json`,
         project: `${options.projectRoot}/package.json`,
         entryFile: maybeJs(options, `${options.projectRoot}/src/index.ts`),
-        external,
+        external: Array.from(external),
         rollupConfig: `@nx/react/plugins/bundle-rollup`,
         compiler: options.compiler ?? 'babel',
         assets: [

packages/react/src/generators/library/library.spec.ts

@@ -551,7 +551,7 @@ describe('lib', () => {
             tsConfig: './tsconfig.lib.json',
             compiler: 'babel',
             external: ["react","react-dom","react/jsx-runtime"],
-            format: ['esm'],
+            format: ["esm"],
             assets:[{ input: '.', output: '.', glob: 'README.md'}],
           }, {
             // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
@@ -1207,7 +1207,7 @@ module.exports = withNx(
             tsConfig: './tsconfig.lib.json',
             compiler: 'babel',
             external: ["react","react-dom","react/jsx-runtime"],
-            format: ['esm'],
+            format: ["esm"],
             assets:[{ input: '.', output: '.', glob: 'README.md'}],
           }, {
             // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options

packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__

@@ -48,10 +48,17 @@ const config: StorybookConfig = {
       },
       resolve: {
         extensions: [
+          '.mjs',
           '.web.tsx',
+          '.tsx',
           '.web.ts',
+          '.ts',
           '.web.jsx',
+          '.jsx',
           '.web.js',
+          '.js',
+          '.css',
+          '.json',
           ...(config.resolve?.extensions ?? []),
         ],
         alias: {

packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__

@@ -48,11 +48,18 @@ const config = {
       },
       resolve: {
         extensions: [
+          '.mjs',
           '.web.tsx',
+          '.tsx',
           '.web.ts',
+          '.ts',
           '.web.jsx',
+          '.jsx',
           '.web.js',
-          ...(config.resolve.extensions ?? []),
+          '.js',
+          '.css',
+          '.json',
+          ...(config.resolve?.extensions ?? []),
         ],
         alias: {
           'react-native': 'react-native-web',