fix(react-native): only add resolverMainFields to metro.config for storybook

packages/react-native/src/generators/application/files/app/metro.config.js.template

@@ -20,8 +20,7 @@ module.exports = (async () => {
       resolver: {
         assetExts: assetExts.filter((ext) => ext !== 'svg'),
         sourceExts: [...sourceExts, 'svg'],
-        resolverMainFields: ['sbmodern', 'browser', 'main'],
-        blockList: exclusionList([/\.\/dist\/.*/]),
+        blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
       },
     },
     {

packages/react-native/src/generators/storybook-configuration/configuration.ts

@@ -1,5 +1,6 @@
 import {
   convertNxGenerator,
+  formatFiles,
   GeneratorCallback,
   readProjectConfiguration,
   Tree,
@@ -8,6 +9,7 @@ import {
 import { configurationGenerator } from '@nrwl/storybook';
 
 import storiesGenerator from '../stories/stories';
+import { addResolverMainFieldsToMetroConfig } from './lib/add-resolver-main-fields-to-metro-config';
 import { createStorybookFiles } from './lib/create-storybook-files';
 import { replaceAppImportWithStorybookToggle } from './lib/replace-app-import-with-storybook-toggle';
 
@@ -36,11 +38,13 @@ export async function storybookConfigurationGenerator(
   addStorybookTask(host, schema.name);
   createStorybookFiles(host, schema);
   replaceAppImportWithStorybookToggle(host, schema);
+  addResolverMainFieldsToMetroConfig(host, schema);
 
   if (schema.generateStories) {
     await generateStories(host, schema);
   }
 
+  await formatFiles(host);
   return installTask;
 }
 

packages/react-native/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.spec.ts

@@ -0,0 +1,161 @@
+import { addProjectConfiguration, Tree } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+
+import { formatFile } from '../../../utils/format-file';
+
+import { addResolverMainFieldsToMetroConfig } from './add-resolver-main-fields-to-metro-config';
+
+describe('addResolverMainFieldsToMetroConfig', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+    });
+  });
+
+  it(`should update metro.config.js and add key projectRoot`, async () => {
+    tree.write(
+      'apps/products/metro.config.js',
+      formatFile`
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
+      },
+    }
+  );
+})();`
+    );
+    addResolverMainFieldsToMetroConfig(tree, {
+      name: 'products',
+    });
+
+    expect(
+      formatFile`${tree.read('apps/products/metro.config.js', 'utf-8')}`
+    ).toEqual(
+      formatFile`
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        blockList: exclusionList([/^(?!.*node_modules).*\/dist\/.*/]),
+      },
+    }
+  );
+})();`
+    );
+  });
+
+  it(`should not udpate metro.config.js if projectRoot already exists`, async () => {
+    tree.write(
+      'apps/products/metro.config.js',
+      `
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        resolverMainFields: ['main'],
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+      },
+    },
+  );
+})();
+`
+    );
+    addResolverMainFieldsToMetroConfig(tree, {
+      name: 'products',
+    });
+
+    expect(tree.read('apps/products/metro.config.js', 'utf-8')).toEqual(
+      `
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        resolverMainFields: ['main'],
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+      },
+    },
+  );
+})();
+`
+    );
+  });
+});

packages/react-native/src/generators/storybook-configuration/lib/add-resolver-main-fields-to-metro-config.ts

@@ -0,0 +1,41 @@
+import {
+  logger,
+  readProjectConfiguration,
+  stripIndents,
+  Tree,
+} from '@nrwl/devkit';
+import { join } from 'path';
+
+import { StorybookConfigureSchema } from '../schema';
+
+/**
+ * Add resolverMainFields in metro.config.js
+ */
+export function addResolverMainFieldsToMetroConfig(
+  host: Tree,
+  schema: StorybookConfigureSchema
+) {
+  const { root } = readProjectConfiguration(host, schema.name);
+
+  const metroConfigPath = join(root, 'metro.config.js');
+
+  try {
+    logger.debug(`Updating resolverMainFields for ${metroConfigPath}`);
+    const metroConfigContent = host.read(metroConfigPath, 'utf-8');
+    if (metroConfigContent.includes('resolverMainFields:')) {
+      logger.warn(stripIndents`${metroConfigPath} is already udpated.`);
+      return;
+    }
+    host.write(
+      metroConfigPath,
+      metroConfigContent.replace(
+        /},\s+resolver: {/,
+        `},resolver: { resolverMainFields: ['sbmodern', 'browser', 'main'],`
+      )
+    );
+  } catch {
+    logger.error(
+      stripIndents`Unable to update ${metroConfigPath} for project ${root}.`
+    );
+  }
+}

packages/react-native/src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0.spec.ts

@@ -1,4 +1,4 @@
-import { addProjectConfiguration, readJson, Tree } from '@nrwl/devkit';
+import { addProjectConfiguration, Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 
 import update from './add-project-root-metro-config-14-0-0';
@@ -22,7 +22,7 @@ describe('Add projectRoot option in metro.config.js', () => {
     });
   });
 
-  it(`should udpate metro.config.js and add key projectRoot`, async () => {
+  it(`should update metro.config.js and add key projectRoot`, async () => {
     tree.write(
       'apps/products/metro.config.js',
       `