@teambit/react 0.0.731 → 0.0.734

package/dist/webpack/resolve-peer.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolvePeerToDirOrFile = resolvePeerToDirOrFile;
+exports.resolvePeerToFile = resolvePeerToFile;
+
+function _fs() {
+  const data = _interopRequireWildcard(require("fs"));
+
+  _fs = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _enhancedResolve() {
+  const data = require("enhanced-resolve");
+
+  _enhancedResolve = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _findRoot() {
+  const data = _interopRequireDefault(require("find-root"));
+
+  _findRoot = function () {
+    return data;
+  };
+
+  return data;
+}
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Get the package folder, and in case it's not found get the resolved file path
+ * @param peerName
+ * @returns
+ */
+function resolvePeerToDirOrFile(peerName, logger, hostRootDir) {
+  let resolved;
+
+  try {
+    let options;
+
+    if (hostRootDir) {
+      options = {
+        // resolve the host root dir to its real location, as require.resolve is preserve symlink, so we get wrong result otherwise
+        paths: [(0, _fs().realpathSync)(hostRootDir), __dirname]
+      };
+    }
+
+    resolved = require.resolve(peerName, options);
+    const folder = (0, _findRoot().default)(resolved);
+    return folder;
+  } catch (e) {
+    if (resolved) {
+      logger.warn(`Couldn't find root dir for "${peerName}" from path "${resolved}" to add it as webpack alias`);
+    } else {
+      logger.warn(`Couldn't resolve "${peerName}" to add it as webpack alias`);
+    }
+
+    return resolved;
+  }
+}
+/**
+ * Make sure to resolve the peer path correctly
+ * we first resolve it to its dir (to be aligned with the aliases transformer)
+ * Then we resolve it to specific file, using enhanced resolve to make sure we resolve it using the correct main fields order
+ * @param peer
+ */
+
+
+function resolvePeerToFile(peer, logger, hostRootDir) {
+  const dirOrFile = resolvePeerToDirOrFile(peer, logger, hostRootDir);
+  const resolver = createResolver();
+  const resolvedFile = resolver.resolveSync({}, '', dirOrFile);
+  return resolvedFile;
+}
+/**
+ * Generate a resolver that will read first the module field then the main field
+ * to make it compatible with webpack behavior
+ * @returns
+ */
+
+
+function createResolver() {
+  // create a resolver
+  const myResolver = _enhancedResolve().ResolverFactory.createResolver({
+    fileSystem: new (_enhancedResolve().CachedInputFileSystem)(_fs().default, 4000),
+    useSyncFileSystemCalls: true,
+    mainFields: ['module', 'main']
+  });
+
+  return myResolver;
+}
+
+//# sourceMappingURL=resolve-peer.js.map

package/dist/webpack/resolve-peer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["resolve-peer.ts"],"names":["resolvePeerToDirOrFile","peerName","logger","hostRootDir","resolved","options","paths","__dirname","require","resolve","folder","e","warn","resolvePeerToFile","peer","dirOrFile","resolver","createResolver","resolvedFile","resolveSync","myResolver","ResolverFactory","fileSystem","CachedInputFileSystem","fs","useSyncFileSystemCalls","mainFields"],"mappings":";;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAGA;AACA;AACA;AACA;AACA;AACO,SAASA,sBAAT,CAAgCC,QAAhC,EAAkDC,MAAlD,EAAkEC,WAAlE,EAA4G;AACjH,MAAIC,QAAJ;;AACA,MAAI;AACF,QAAIC,OAAJ;;AACA,QAAIF,WAAJ,EAAiB;AACfE,MAAAA,OAAO,GAAG;AACR;AACAC,QAAAA,KAAK,EAAE,CAAC,wBAAaH,WAAb,CAAD,EAA4BI,SAA5B;AAFC,OAAV;AAID;;AACDH,IAAAA,QAAQ,GAAGI,OAAO,CAACC,OAAR,CAAgBR,QAAhB,EAA0BI,OAA1B,CAAX;AACA,UAAMK,MAAM,GAAG,yBAASN,QAAT,CAAf;AACA,WAAOM,MAAP;AACD,GAXD,CAWE,OAAOC,CAAP,EAAU;AACV,QAAIP,QAAJ,EAAc;AACZF,MAAAA,MAAM,CAACU,IAAP,CAAa,+BAA8BX,QAAS,gBAAeG,QAAS,8BAA5E;AACD,KAFD,MAEO;AACLF,MAAAA,MAAM,CAACU,IAAP,CAAa,qBAAoBX,QAAS,8BAA1C;AACD;;AACD,WAAOG,QAAP;AACD;AACF;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASS,iBAAT,CAA2BC,IAA3B,EAAyCZ,MAAzC,EAAyDC,WAAzD,EAA+E;AACpF,QAAMY,SAAS,GAAGf,sBAAsB,CAACc,IAAD,EAAOZ,MAAP,EAAeC,WAAf,CAAxC;AACA,QAAMa,QAAQ,GAAGC,cAAc,EAA/B;AACA,QAAMC,YAAY,GAAGF,QAAQ,CAACG,WAAT,CAAqB,EAArB,EAAyB,EAAzB,EAA6BJ,SAA7B,CAArB;AACA,SAAOG,YAAP;AACD;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASD,cAAT,GAA0B;AACxB;AACA,QAAMG,UAAU,GAAGC,mCAAgBJ,cAAhB,CAA+B;AAChDK,IAAAA,UAAU,EAAE,KAAIC,wCAAJ,EAA0BC,aAA1B,EAA8B,IAA9B,CADoC;AAEhDC,IAAAA,sBAAsB,EAAE,IAFwB;AAGhDC,IAAAA,UAAU,EAAE,CAAC,QAAD,EAAW,MAAX;AAHoC,GAA/B,CAAnB;;AAKA,SAAON,UAAP;AACD","sourcesContent":["import fs, { realpathSync } from 'fs';\nimport { ResolverFactory, CachedInputFileSystem } from 'enhanced-resolve';\nimport findRoot from 'find-root';\nimport { Logger } from '@teambit/logger';\n\n/**\n * Get the package folder, and in case it's not found get the resolved file path\n * @param peerName\n * @returns\n */\nexport function resolvePeerToDirOrFile(peerName: string, logger: Logger, hostRootDir?: string): string | undefined {\n  let resolved;\n  try {\n    let options;\n    if (hostRootDir) {\n      options = {\n        // resolve the host root dir to its real location, as require.resolve is preserve symlink, so we get wrong result otherwise\n        paths: [realpathSync(hostRootDir), __dirname],\n      };\n    }\n    resolved = require.resolve(peerName, options);\n    const folder = findRoot(resolved);\n    return folder;\n  } catch (e) {\n    if (resolved) {\n      logger.warn(`Couldn't find root dir for \"${peerName}\" from path \"${resolved}\" to add it as webpack alias`);\n    } else {\n      logger.warn(`Couldn't resolve \"${peerName}\" to add it as webpack alias`);\n    }\n    return resolved;\n  }\n}\n\n/**\n * Make sure to resolve the peer path correctly\n * we first resolve it to its dir (to be aligned with the aliases transformer)\n * Then we resolve it to specific file, using enhanced resolve to make sure we resolve it using the correct main fields order\n * @param peer\n */\nexport function resolvePeerToFile(peer: string, logger: Logger, hostRootDir?: string) {\n  const dirOrFile = resolvePeerToDirOrFile(peer, logger, hostRootDir);\n  const resolver = createResolver();\n  const resolvedFile = resolver.resolveSync({}, '', dirOrFile);\n  return resolvedFile;\n}\n\n/**\n * Generate a resolver that will read first the module field then the main field\n * to make it compatible with webpack behavior\n * @returns\n */\nfunction createResolver() {\n  // create a resolver\n  const myResolver = ResolverFactory.createResolver({\n    fileSystem: new CachedInputFileSystem(fs, 4000),\n    useSyncFileSystemCalls: true,\n    mainFields: ['module', 'main'],\n  });\n  return myResolver;\n}\n"]}

package/dist/webpack/transformers.d.ts

@@ -1,3 +1,10 @@
+import { WebpackConfigTransformContext } from '@teambit/webpack';
 import { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';
 import { Logger } from '@teambit/logger';
-export declare function generateAddAliasesFromPeersTransformer(peers: string[], logger: Logger): (config: WebpackConfigMutator) => WebpackConfigMutator;
+export declare function generateAddAliasesFromPeersTransformer(peers: string[], logger: Logger): (config: WebpackConfigMutator, context: WebpackConfigTransformContext) => WebpackConfigMutator;
+/**
+ * Generate a transformer that expose all the peers as global via the expose loader
+ * @param peers
+ * @returns
+ */
+export declare function generateExposePeersTransformer(peers: string[], logger: Logger): (config: WebpackConfigMutator, context: WebpackConfigTransformContext) => WebpackConfigMutator;

package/dist/webpack/transformers.js

@@ -1,68 +1,62 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateAddAliasesFromPeersTransformer = generateAddAliasesFromPeersTransformer;
+exports.generateExposePeersTransformer = generateExposePeersTransformer;
 
-function _findRoot() {
-  const data = _interopRequireDefault(require("find-root"));
+function _getExposedRules() {
+  const data = require("./get-exposed-rules");
 
-  _findRoot = function () {
+  _getExposedRules = function () {
     return data;
   };
 
   return data;
 }
 
-function generateAddAliasesFromPeersTransformer(peers, logger) {
-  const peerAliases = peers.reduce((acc, peerName) => {
-    // gets the correct module folder of the package.
-    // this allows us to resolve internal files, for example:
-    // node_modules/react-dom/test-utils
-    //
-    // we can't use require.resolve() because it resolves to a specific file.
-    // for example, if we used "react-dom": require.resolve("react-dom"),
-    // it would try to resolve "react-dom/test-utils" as:
-    // node_modules/react-dom/index.js/test-utils
-    const resolved = getResolvedDirOrFile(peerName, logger);
+function _resolvePeer() {
+  const data = require("./resolve-peer");
+
+  _resolvePeer = function () {
+    return data;
+  };
 
-    if (resolved) {
-      acc[peerName] = resolved;
-    }
+  return data;
+}
 
-    return acc;
-  }, {});
-  return config => {
+function generateAddAliasesFromPeersTransformer(peers, logger) {
+  return (config, context) => {
+    const peerAliases = peers.reduce((acc, peerName) => {
+      // gets the correct module folder of the package.
+      // this allows us to resolve internal files, for example:
+      // node_modules/react-dom/test-utils
+      //
+      // we can't use require.resolve() because it resolves to a specific file.
+      // for example, if we used "react-dom": require.resolve("react-dom"),
+      // it would try to resolve "react-dom/test-utils" as:
+      // node_modules/react-dom/index.js/test-utils
+      acc[peerName] = (0, _resolvePeer().resolvePeerToDirOrFile)(peerName, logger, context.target.hostRootDir);
+      return acc;
+    }, {});
     config.addAliases(peerAliases);
     return config;
   };
 }
 /**
- * Get the package folder, and in case it's not found get the require.resolve path
- * @param peerName
+ * Generate a transformer that expose all the peers as global via the expose loader
+ * @param peers
  * @returns
  */
 
 
-function getResolvedDirOrFile(peerName, logger) {
-  let resolved;
-
-  try {
-    resolved = require.resolve(peerName);
-    const folder = (0, _findRoot().default)(resolved);
-    return folder;
-  } catch (e) {
-    if (resolved) {
-      logger.warn(`Couldn't find root dir for "${peerName}" from path "${resolved}" to add it as webpack alias`);
-    } else {
-      logger.warn(`Couldn't resolve "${peerName}" to add it as webpack alias`);
-    }
-
-    return resolved;
-  }
+function generateExposePeersTransformer(peers, logger) {
+  return (config, context) => {
+    const exposedRules = (0, _getExposedRules().getExposedRules)(peers, logger, context.target.hostRootDir);
+    config.addModuleRules(exposedRules);
+    return config;
+  };
 }
 
 //# sourceMappingURL=transformers.js.map

package/dist/webpack/transformers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["transformers.ts"],"names":["generateAddAliasesFromPeersTransformer","peers","logger","peerAliases","reduce","acc","peerName","resolved","getResolvedDirOrFile","config","addAliases","require","resolve","folder","e","warn"],"mappings":";;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIO,SAASA,sCAAT,CAAgDC,KAAhD,EAAiEC,MAAjE,EAAiF;AACtF,QAAMC,WAAW,GAAGF,KAAK,CAACG,MAAN,CAAa,CAACC,GAAD,EAAMC,QAAN,KAAmB;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAMC,QAAQ,GAAGC,oBAAoB,CAACF,QAAD,EAAWJ,MAAX,CAArC;;AACA,QAAIK,QAAJ,EAAc;AACZF,MAAAA,GAAG,CAACC,QAAD,CAAH,GAAgBC,QAAhB;AACD;;AACD,WAAOF,GAAP;AACD,GAdmB,EAcjB,EAdiB,CAApB;AAeA,SAAQI,MAAD,IAAwD;AAC7DA,IAAAA,MAAM,CAACC,UAAP,CAAkBP,WAAlB;AACA,WAAOM,MAAP;AACD,GAHD;AAID;AAED;AACA;AACA;AACA;AACA;;;AACA,SAASD,oBAAT,CAA8BF,QAA9B,EAAgDJ,MAAhD,EAAoF;AAClF,MAAIK,QAAJ;;AACA,MAAI;AACFA,IAAAA,QAAQ,GAAGI,OAAO,CAACC,OAAR,CAAgBN,QAAhB,CAAX;AACA,UAAMO,MAAM,GAAG,yBAASN,QAAT,CAAf;AACA,WAAOM,MAAP;AACD,GAJD,CAIE,OAAOC,CAAP,EAAU;AACV,QAAIP,QAAJ,EAAc;AACZL,MAAAA,MAAM,CAACa,IAAP,CAAa,+BAA8BT,QAAS,gBAAeC,QAAS,8BAA5E;AACD,KAFD,MAEO;AACLL,MAAAA,MAAM,CAACa,IAAP,CAAa,qBAAoBT,QAAS,8BAA1C;AACD;;AACD,WAAOC,QAAP;AACD;AACF","sourcesContent":["import findRoot from 'find-root';\nimport { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';\nimport { Logger } from '@teambit/logger';\n\nexport function generateAddAliasesFromPeersTransformer(peers: string[], logger: Logger) {\n  const peerAliases = peers.reduce((acc, peerName) => {\n    // gets the correct module folder of the package.\n    // this allows us to resolve internal files, for example:\n    // node_modules/react-dom/test-utils\n    //\n    // we can't use require.resolve() because it resolves to a specific file.\n    // for example, if we used \"react-dom\": require.resolve(\"react-dom\"),\n    // it would try to resolve \"react-dom/test-utils\" as:\n    // node_modules/react-dom/index.js/test-utils\n    const resolved = getResolvedDirOrFile(peerName, logger);\n    if (resolved) {\n      acc[peerName] = resolved;\n    }\n    return acc;\n  }, {});\n  return (config: WebpackConfigMutator): WebpackConfigMutator => {\n    config.addAliases(peerAliases);\n    return config;\n  };\n}\n\n/**\n * Get the package folder, and in case it's not found get the require.resolve path\n * @param peerName\n * @returns\n */\nfunction getResolvedDirOrFile(peerName: string, logger: Logger): string | undefined {\n  let resolved;\n  try {\n    resolved = require.resolve(peerName);\n    const folder = findRoot(resolved);\n    return folder;\n  } catch (e) {\n    if (resolved) {\n      logger.warn(`Couldn't find root dir for \"${peerName}\" from path \"${resolved}\" to add it as webpack alias`);\n    } else {\n      logger.warn(`Couldn't resolve \"${peerName}\" to add it as webpack alias`);\n    }\n    return resolved;\n  }\n}\n"]}
+{"version":3,"sources":["transformers.ts"],"names":["generateAddAliasesFromPeersTransformer","peers","logger","config","context","peerAliases","reduce","acc","peerName","target","hostRootDir","addAliases","generateExposePeersTransformer","exposedRules","addModuleRules"],"mappings":";;;;;;;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,SAASA,sCAAT,CAAgDC,KAAhD,EAAiEC,MAAjE,EAAiF;AACtF,SAAO,CAACC,MAAD,EAA+BC,OAA/B,KAAgG;AACrG,UAAMC,WAAW,GAAGJ,KAAK,CAACK,MAAN,CAAa,CAACC,GAAD,EAAMC,QAAN,KAAmB;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAD,MAAAA,GAAG,CAACC,QAAD,CAAH,GAAgB,2CAAuBA,QAAvB,EAAiCN,MAAjC,EAAyCE,OAAO,CAACK,MAAR,CAAeC,WAAxD,CAAhB;AACA,aAAOH,GAAP;AACD,KAXmB,EAWjB,EAXiB,CAApB;AAYAJ,IAAAA,MAAM,CAACQ,UAAP,CAAkBN,WAAlB;AACA,WAAOF,MAAP;AACD,GAfD;AAgBD;AAED;AACA;AACA;AACA;AACA;;;AACO,SAASS,8BAAT,CAAwCX,KAAxC,EAAyDC,MAAzD,EAAyE;AAC9E,SAAO,CAACC,MAAD,EAA+BC,OAA/B,KAAgG;AACrG,UAAMS,YAAY,GAAG,wCAAgBZ,KAAhB,EAAuBC,MAAvB,EAA+BE,OAAO,CAACK,MAAR,CAAeC,WAA9C,CAArB;AACAP,IAAAA,MAAM,CAACW,cAAP,CAAsBD,YAAtB;AACA,WAAOV,MAAP;AACD,GAJD;AAKD","sourcesContent":["import { WebpackConfigTransformContext } from '@teambit/webpack';\nimport { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';\nimport { Logger } from '@teambit/logger';\nimport { getExposedRules } from './get-exposed-rules';\nimport { resolvePeerToDirOrFile } from './resolve-peer';\n\nexport function generateAddAliasesFromPeersTransformer(peers: string[], logger: Logger) {\n  return (config: WebpackConfigMutator, context: WebpackConfigTransformContext): WebpackConfigMutator => {\n    const peerAliases = peers.reduce((acc, peerName) => {\n      // gets the correct module folder of the package.\n      // this allows us to resolve internal files, for example:\n      // node_modules/react-dom/test-utils\n      //\n      // we can't use require.resolve() because it resolves to a specific file.\n      // for example, if we used \"react-dom\": require.resolve(\"react-dom\"),\n      // it would try to resolve \"react-dom/test-utils\" as:\n      // node_modules/react-dom/index.js/test-utils\n      acc[peerName] = resolvePeerToDirOrFile(peerName, logger, context.target.hostRootDir);\n      return acc;\n    }, {});\n    config.addAliases(peerAliases);\n    return config;\n  };\n}\n\n/**\n * Generate a transformer that expose all the peers as global via the expose loader\n * @param peers\n * @returns\n */\nexport function generateExposePeersTransformer(peers: string[], logger: Logger) {\n  return (config: WebpackConfigMutator, context: WebpackConfigTransformContext): WebpackConfigMutator => {\n    const exposedRules = getExposedRules(peers, logger, context.target.hostRootDir);\n    config.addModuleRules(exposedRules);\n    return config;\n  };\n}\n"]}

package/dist/webpack/webpack.config.base.prod.js

@@ -51,26 +51,12 @@ function _getExternals() {
   return data;
 }
 
-function _getExposedRules() {
-  const data = require("./get-exposed-rules");
-
-  _getExposedRules = function () {
-    return data;
-  };
-
-  return data;
-}
-
 // import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 // eslint-disable-next-line complexity
 function _default(externalizePeer, peers, dev) {
   const externals = externalizePeer ? (0, _getExternals().getExternals)(peers) : undefined;
-  const exposedRules = externalizePeer ? undefined : (0, _getExposedRules().getExposedRules)(peers);
-  const module = externalizePeer ? undefined : {
-    rules: exposedRules
-  };
   const optimization = dev ? undefined : {
     minimize: true,
     minimizer: [new (_terserWebpackPlugin().default)({
@@ -149,7 +135,6 @@ function _default(externalizePeer, peers, dev) {
 
   };
   return {
-    module,
     externals,
     optimization,
     plugins: [// Generate an asset manifest file with the following content:

package/dist/webpack/webpack.config.base.prod.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack.config.base.prod.ts"],"names":["externalizePeer","peers","dev","externals","undefined","exposedRules","module","rules","optimization","minimize","minimizer","TerserPlugin","minify","esbuildMinify","terserOptions","minifyWhitespace","minifyIdentifiers","minifySyntax","CssMinimizerPlugin","minimizerOptions","preset","minifyFontValues","removeQuotes","plugins","WorkboxWebpackPlugin","GenerateSW","clientsClaim","exclude","navigateFallback","navigateFallbackDenylist","RegExp","filter","Boolean","performance"],"mappings":";;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAEA;AACA;AACA;AACe,kBAAUA,eAAV,EAAoCC,KAApC,EAAqDC,GAArD,EAAmF;AAChG,QAAMC,SAAS,GAAGH,eAAe,GAAI,kCAAaC,KAAb,CAAJ,GAAkCG,SAAnE;AACA,QAAMC,YAAY,GAAGL,eAAe,GAAGI,SAAH,GAAe,wCAAgBH,KAAhB,CAAnD;AAEA,QAAMK,MAAM,GAAGN,eAAe,GAC1BI,SAD0B,GAE1B;AACEG,IAAAA,KAAK,EAAEF;AADT,GAFJ;AAMA,QAAMG,YAAY,GAAGN,GAAG,GACpBE,SADoB,GAEpB;AACEK,IAAAA,QAAQ,EAAE,IADZ;AAEEC,IAAAA,SAAS,EAAE,CACT,KAAIC,8BAAJ,EAAiB;AACfC,MAAAA,MAAM,EAAED,+BAAaE,aADN;AAEf;AACA;AACA;AACAC,MAAAA,aAAa,EAAE;AACbF,QAAAA,MAAM,EAAE,KADK;AAEbG,QAAAA,gBAAgB,EAAE,IAFL;AAGb;AACAC,QAAAA,iBAAiB,EAAE,KAJN;AAKb;AACAC,QAAAA,YAAY,EAAE;AAND,OALA,CAaf;;AAbe,KAAjB,CADS,EAiBT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAIC,oCAAJ,EAAuB;AACrBC,MAAAA,gBAAgB,EAAE;AAChBC,QAAAA,MAAM,EAAE,CACN,SADM,EAEN;AACEC,UAAAA,gBAAgB,EAAE;AAAEC,YAAAA,YAAY,EAAE;AAAhB;AADpB,SAFM;AADQ;AADG,KAAvB,CAvDS,CAFb,CAoEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAhFF,GAFJ;AAqFA,SAAO;AACLhB,IAAAA,MADK;AAELH,IAAAA,SAFK;AAGLK,IAAAA,YAHK;AAKLe,IAAAA,OAAO,EAAE,CACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAIC,gCAAqBC,UAAzB,EAAoC;AAClCC,MAAAA,YAAY,EAAE,IADoB;AAElCC,MAAAA,OAAO,EAAE,CAAC,QAAD,EAAW,uBAAX,CAFyB;AAGlC;AACAC,MAAAA,gBAAgB,EAAE,mBAJgB;AAKlCC,MAAAA,wBAAwB,EAAE,CACxB;AACA,UAAIC,MAAJ,CAAW,KAAX,CAFwB,EAGxB;AACA;AACA;AACA;AACA,UAAIA,MAAJ,CAAW,kBAAX,CAPwB;AALQ,KAApC,CAzBO,EAwCPC,MAxCO,CAwCAC,OAxCA,CALJ;AA8CL;AACA;AACAC,IAAAA,WAAW,EAAE;AAhDR,GAAP;AAkDD","sourcesContent":["import WorkboxWebpackPlugin from 'workbox-webpack-plugin';\nimport CssMinimizerPlugin from 'css-minimizer-webpack-plugin';\nimport TerserPlugin from 'terser-webpack-plugin';\nimport { Configuration } from 'webpack';\nimport { getExternals } from './get-externals';\nimport { getExposedRules } from './get-exposed-rules';\n// import { WebpackManifestPlugin } from 'webpack-manifest-plugin';\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\nexport default function (externalizePeer: boolean, peers: string[], dev?: boolean): Configuration {\n  const externals = externalizePeer ? (getExternals(peers) as any) : undefined;\n  const exposedRules = externalizePeer ? undefined : getExposedRules(peers);\n\n  const module = externalizePeer\n    ? undefined\n    : {\n        rules: exposedRules,\n      };\n\n  const optimization = dev\n    ? undefined\n    : {\n        minimize: true,\n        minimizer: [\n          new TerserPlugin({\n            minify: TerserPlugin.esbuildMinify,\n            // `terserOptions` options will be passed to `esbuild`\n            // Link to options - https://esbuild.github.io/api/#minify\n            // Note: the `minify` options is true by default (and override other `minify*` options), so if you want to disable the `minifyIdentifiers` option (or other `minify*` options) please use:\n            terserOptions: {\n              minify: false,\n              minifyWhitespace: true,\n              // We don't want to minify identifiers to enable easier debugging on remote scopes when there are preview issues\n              minifyIdentifiers: false,\n              // minifyIdentifiers: true,\n              minifySyntax: true,\n            },\n            // terserOptions: {},\n          }),\n\n          // This is only used in production mode\n          // new TerserPlugin({\n          //   extractComments: false,\n          //   terserOptions: {\n          //     parse: {\n          //       // We want terser to parse ecma 8 code. However, we don't want it\n          //       // to apply any minification steps that turns valid ecma 5 code\n          //       // into invalid ecma 5 code. This is why the 'compress' and 'output'\n          //       // sections only apply transformations that are ecma 5 safe\n          //       // https://github.com/facebook/create-react-app/pull/4234\n          //       ecma: 8,\n          //     },\n          //     compress: {\n          //       ecma: 5,\n          //       warnings: false,\n          //       // Disabled because of an issue with Uglify breaking seemingly valid code:\n          //       // https://github.com/facebook/create-react-app/issues/2376\n          //       // Pending further investigation:\n          //       // https://github.com/mishoo/UglifyJS2/issues/2011\n          //       comparisons: false,\n          //       // Disabled because of an issue with Terser breaking valid code:\n          //       // https://github.com/facebook/create-react-app/issues/5250\n          //       // Pending further investigation:\n          //       // https://github.com/terser-js/terser/issues/120\n          //       inline: 2,\n          //     },\n          //     mangle: {\n          //       safari10: true,\n          //     },\n          //     output: {\n          //       ecma: 5,\n          //       comments: false,\n          //       // Turned on because emoji and regex is not minified properly using default\n          //       // https://github.com/facebook/create-react-app/issues/2488\n          //       ascii_only: true,\n          //     },\n          //   },\n          // }),\n          new CssMinimizerPlugin({\n            minimizerOptions: {\n              preset: [\n                'default',\n                {\n                  minifyFontValues: { removeQuotes: false },\n                },\n              ],\n            },\n          }),\n        ],\n        // Automatically split vendor and commons\n        // https://twitter.com/wSokra/status/969633336732905474\n        // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366\n        // splitChunks: {\n        // chunks: 'all',\n        // name: false,\n        // },\n        // Keep the runtime chunk separated to enable long term caching\n        // https://twitter.com/wSokra/status/969679223278505985\n        // https://github.com/facebook/create-react-app/issues/5358\n        // runtimeChunk: {\n        // name: (entrypoint) => `runtime-${entrypoint.name}`,\n        // },\n      };\n\n  return {\n    module,\n    externals,\n    optimization,\n\n    plugins: [\n      // Generate an asset manifest file with the following content:\n      // - \"files\" key: Mapping of all asset filenames to their corresponding\n      //   output file so that tools can pick it up without having to parse\n      //   `index.html`\n      //   can be used to reconstruct the HTML if necessary\n      // new WebpackManifestPlugin({\n      //   fileName: 'asset-manifest.json',\n      //   publicPath: 'public',\n      //   generate: (seed, files, entrypoints) => {\n      //     const manifestFiles = files.reduce((manifest, file) => {\n      //       manifest[file.name] = file.path;\n      //       return manifest;\n      //     }, seed);\n      //     const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));\n\n      //     // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276\n      //     return {\n      //       files: manifestFiles,\n      //       entrypoints: entrypointFiles,\n      //     } as Record<string, string>;\n      //   },\n      // }),\n      // Generate a service worker script that will precache, and keep up to date,\n      // the HTML & assets that are part of the webpack build.\n      new WorkboxWebpackPlugin.GenerateSW({\n        clientsClaim: true,\n        exclude: [/\\.map$/, /asset-manifest\\.json$/],\n        // importWorkboxFrom: 'cdn',\n        navigateFallback: 'public/index.html',\n        navigateFallbackDenylist: [\n          // Exclude URLs starting with /_, as they're likely an API call\n          new RegExp('^/_'),\n          // Exclude any URLs whose last part seems to be a file extension\n          // as they're likely a resource and not a SPA route.\n          // URLs containing a \"?\" character won't be blacklisted as they're likely\n          // a route with query params (e.g. auth callbacks).\n          new RegExp('/[^/?]+\\\\.[^/]+$'),\n        ],\n      }),\n    ].filter(Boolean),\n    // Turn off performance processing because we utilize\n    // our own hints via the FileSizeReporter\n    performance: false,\n  };\n}\n"]}
+{"version":3,"sources":["webpack.config.base.prod.ts"],"names":["externalizePeer","peers","dev","externals","undefined","optimization","minimize","minimizer","TerserPlugin","minify","esbuildMinify","terserOptions","minifyWhitespace","minifyIdentifiers","minifySyntax","CssMinimizerPlugin","minimizerOptions","preset","minifyFontValues","removeQuotes","plugins","WorkboxWebpackPlugin","GenerateSW","clientsClaim","exclude","navigateFallback","navigateFallbackDenylist","RegExp","filter","Boolean","performance"],"mappings":";;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAEA;AACA;AACA;AACe,kBAAUA,eAAV,EAAoCC,KAApC,EAAqDC,GAArD,EAAmF;AAChG,QAAMC,SAAS,GAAGH,eAAe,GAAI,kCAAaC,KAAb,CAAJ,GAAkCG,SAAnE;AAEA,QAAMC,YAAY,GAAGH,GAAG,GACpBE,SADoB,GAEpB;AACEE,IAAAA,QAAQ,EAAE,IADZ;AAEEC,IAAAA,SAAS,EAAE,CACT,KAAIC,8BAAJ,EAAiB;AACfC,MAAAA,MAAM,EAAED,+BAAaE,aADN;AAEf;AACA;AACA;AACAC,MAAAA,aAAa,EAAE;AACbF,QAAAA,MAAM,EAAE,KADK;AAEbG,QAAAA,gBAAgB,EAAE,IAFL;AAGb;AACAC,QAAAA,iBAAiB,EAAE,KAJN;AAKb;AACAC,QAAAA,YAAY,EAAE;AAND,OALA,CAaf;;AAbe,KAAjB,CADS,EAiBT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAIC,oCAAJ,EAAuB;AACrBC,MAAAA,gBAAgB,EAAE;AAChBC,QAAAA,MAAM,EAAE,CACN,SADM,EAEN;AACEC,UAAAA,gBAAgB,EAAE;AAAEC,YAAAA,YAAY,EAAE;AAAhB;AADpB,SAFM;AADQ;AADG,KAAvB,CAvDS,CAFb,CAoEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAhFF,GAFJ;AAqFA,SAAO;AACLhB,IAAAA,SADK;AAELE,IAAAA,YAFK;AAILe,IAAAA,OAAO,EAAE,CACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAIC,gCAAqBC,UAAzB,EAAoC;AAClCC,MAAAA,YAAY,EAAE,IADoB;AAElCC,MAAAA,OAAO,EAAE,CAAC,QAAD,EAAW,uBAAX,CAFyB;AAGlC;AACAC,MAAAA,gBAAgB,EAAE,mBAJgB;AAKlCC,MAAAA,wBAAwB,EAAE,CACxB;AACA,UAAIC,MAAJ,CAAW,KAAX,CAFwB,EAGxB;AACA;AACA;AACA;AACA,UAAIA,MAAJ,CAAW,kBAAX,CAPwB;AALQ,KAApC,CAzBO,EAwCPC,MAxCO,CAwCAC,OAxCA,CAJJ;AA6CL;AACA;AACAC,IAAAA,WAAW,EAAE;AA/CR,GAAP;AAiDD","sourcesContent":["import WorkboxWebpackPlugin from 'workbox-webpack-plugin';\nimport CssMinimizerPlugin from 'css-minimizer-webpack-plugin';\nimport TerserPlugin from 'terser-webpack-plugin';\nimport { Configuration } from 'webpack';\nimport { getExternals } from './get-externals';\n// import { WebpackManifestPlugin } from 'webpack-manifest-plugin';\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\nexport default function (externalizePeer: boolean, peers: string[], dev?: boolean): Configuration {\n  const externals = externalizePeer ? (getExternals(peers) as any) : undefined;\n\n  const optimization = dev\n    ? undefined\n    : {\n        minimize: true,\n        minimizer: [\n          new TerserPlugin({\n            minify: TerserPlugin.esbuildMinify,\n            // `terserOptions` options will be passed to `esbuild`\n            // Link to options - https://esbuild.github.io/api/#minify\n            // Note: the `minify` options is true by default (and override other `minify*` options), so if you want to disable the `minifyIdentifiers` option (or other `minify*` options) please use:\n            terserOptions: {\n              minify: false,\n              minifyWhitespace: true,\n              // We don't want to minify identifiers to enable easier debugging on remote scopes when there are preview issues\n              minifyIdentifiers: false,\n              // minifyIdentifiers: true,\n              minifySyntax: true,\n            },\n            // terserOptions: {},\n          }),\n\n          // This is only used in production mode\n          // new TerserPlugin({\n          //   extractComments: false,\n          //   terserOptions: {\n          //     parse: {\n          //       // We want terser to parse ecma 8 code. However, we don't want it\n          //       // to apply any minification steps that turns valid ecma 5 code\n          //       // into invalid ecma 5 code. This is why the 'compress' and 'output'\n          //       // sections only apply transformations that are ecma 5 safe\n          //       // https://github.com/facebook/create-react-app/pull/4234\n          //       ecma: 8,\n          //     },\n          //     compress: {\n          //       ecma: 5,\n          //       warnings: false,\n          //       // Disabled because of an issue with Uglify breaking seemingly valid code:\n          //       // https://github.com/facebook/create-react-app/issues/2376\n          //       // Pending further investigation:\n          //       // https://github.com/mishoo/UglifyJS2/issues/2011\n          //       comparisons: false,\n          //       // Disabled because of an issue with Terser breaking valid code:\n          //       // https://github.com/facebook/create-react-app/issues/5250\n          //       // Pending further investigation:\n          //       // https://github.com/terser-js/terser/issues/120\n          //       inline: 2,\n          //     },\n          //     mangle: {\n          //       safari10: true,\n          //     },\n          //     output: {\n          //       ecma: 5,\n          //       comments: false,\n          //       // Turned on because emoji and regex is not minified properly using default\n          //       // https://github.com/facebook/create-react-app/issues/2488\n          //       ascii_only: true,\n          //     },\n          //   },\n          // }),\n          new CssMinimizerPlugin({\n            minimizerOptions: {\n              preset: [\n                'default',\n                {\n                  minifyFontValues: { removeQuotes: false },\n                },\n              ],\n            },\n          }),\n        ],\n        // Automatically split vendor and commons\n        // https://twitter.com/wSokra/status/969633336732905474\n        // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366\n        // splitChunks: {\n        // chunks: 'all',\n        // name: false,\n        // },\n        // Keep the runtime chunk separated to enable long term caching\n        // https://twitter.com/wSokra/status/969679223278505985\n        // https://github.com/facebook/create-react-app/issues/5358\n        // runtimeChunk: {\n        // name: (entrypoint) => `runtime-${entrypoint.name}`,\n        // },\n      };\n\n  return {\n    externals,\n    optimization,\n\n    plugins: [\n      // Generate an asset manifest file with the following content:\n      // - \"files\" key: Mapping of all asset filenames to their corresponding\n      //   output file so that tools can pick it up without having to parse\n      //   `index.html`\n      //   can be used to reconstruct the HTML if necessary\n      // new WebpackManifestPlugin({\n      //   fileName: 'asset-manifest.json',\n      //   publicPath: 'public',\n      //   generate: (seed, files, entrypoints) => {\n      //     const manifestFiles = files.reduce((manifest, file) => {\n      //       manifest[file.name] = file.path;\n      //       return manifest;\n      //     }, seed);\n      //     const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));\n\n      //     // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276\n      //     return {\n      //       files: manifestFiles,\n      //       entrypoints: entrypointFiles,\n      //     } as Record<string, string>;\n      //   },\n      // }),\n      // Generate a service worker script that will precache, and keep up to date,\n      // the HTML & assets that are part of the webpack build.\n      new WorkboxWebpackPlugin.GenerateSW({\n        clientsClaim: true,\n        exclude: [/\\.map$/, /asset-manifest\\.json$/],\n        // importWorkboxFrom: 'cdn',\n        navigateFallback: 'public/index.html',\n        navigateFallbackDenylist: [\n          // Exclude URLs starting with /_, as they're likely an API call\n          new RegExp('^/_'),\n          // Exclude any URLs whose last part seems to be a file extension\n          // as they're likely a resource and not a SPA route.\n          // URLs containing a \"?\" character won't be blacklisted as they're likely\n          // a route with query params (e.g. auth callbacks).\n          new RegExp('/[^/?]+\\\\.[^/]+$'),\n        ],\n      }),\n    ].filter(Boolean),\n    // Turn off performance processing because we utilize\n    // our own hints via the FileSizeReporter\n    performance: false,\n  };\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.731",
+  "version": "0.0.734",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.731"
+    "version": "0.0.734"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -20,6 +20,7 @@
     "camelcase": "6.2.0",
     "expose-loader": "3.1.0",
     "postcss-preset-env": "6.7.0",
+    "enhanced-resolve": "4.5.0",
     "find-root": "1.1.0",
     "css-minimizer-webpack-plugin": "3.0.2",
     "terser-webpack-plugin": "5.2.0",
@@ -42,7 +43,7 @@
     "@babel/preset-env": "7.12.17",
     "react-error-overlay": "6.0.9",
     "strip-ansi": "6.0.0",
-    "@dreysolano/prerender-spa-plugin": "1.0.3",
+    "prerender-spa-plugin-next": "4.2.0",
     "comment-json": "3.0.3",
     "react-refresh": "0.10.0",
     "@babel/runtime": "^7.12.18",
@@ -83,49 +84,50 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.356",
-    "@teambit/preview": "0.0.731",
+    "@teambit/preview": "0.0.734",
     "@teambit/react.ui.error-fallback": "0.0.111",
     "@teambit/react.ui.loader-fallback": "0.0.89",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.163",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/builder": "0.0.731",
-    "@teambit/bundler": "0.0.731",
-    "@teambit/compiler": "0.0.731",
+    "@teambit/builder": "0.0.734",
+    "@teambit/bundler": "0.0.734",
+    "@teambit/compiler": "0.0.734",
     "@teambit/component.modules.component-url": "0.0.124",
-    "@teambit/component": "0.0.731",
-    "@teambit/envs": "0.0.731",
-    "@teambit/eslint": "0.0.731",
-    "@teambit/formatter": "0.0.282",
-    "@teambit/jest": "0.0.731",
-    "@teambit/linter": "0.0.731",
-    "@teambit/logger": "0.0.580",
-    "@teambit/pkg": "0.0.731",
-    "@teambit/prettier": "0.0.282",
+    "@teambit/component": "0.0.734",
+    "@teambit/envs": "0.0.734",
+    "@teambit/eslint": "0.0.734",
+    "@teambit/formatter": "0.0.285",
+    "@teambit/jest": "0.0.734",
+    "@teambit/linter": "0.0.734",
+    "@teambit/logger": "0.0.582",
+    "@teambit/pkg": "0.0.734",
+    "@teambit/prettier": "0.0.285",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
-    "@teambit/schema": "0.0.731",
-    "@teambit/tester": "0.0.731",
-    "@teambit/typescript": "0.0.731",
-    "@teambit/webpack": "0.0.731",
-    "@teambit/workspace": "0.0.731",
-    "@teambit/application": "0.0.373",
-    "@teambit/cli": "0.0.488",
-    "@teambit/dependency-resolver": "0.0.731",
-    "@teambit/generator": "0.0.731",
-    "@teambit/graphql": "0.0.731",
+    "@teambit/schema": "0.0.734",
+    "@teambit/tester": "0.0.734",
+    "@teambit/typescript": "0.0.734",
+    "@teambit/webpack": "0.0.734",
+    "@teambit/workspace": "0.0.734",
+    "@teambit/application": "0.0.376",
+    "@teambit/cli": "0.0.490",
+    "@teambit/dependency-resolver": "0.0.734",
+    "@teambit/generator": "0.0.734",
+    "@teambit/graphql": "0.0.734",
     "@teambit/react.ui.highlighter-provider": "0.0.189",
-    "@teambit/compositions": "0.0.731",
-    "@teambit/ui": "0.0.731",
-    "@teambit/react.eslint-config-bit-react": "0.0.562",
+    "@teambit/compositions": "0.0.734",
+    "@teambit/ui": "0.0.734",
+    "@teambit/react.eslint-config-bit-react": "0.0.564",
     "@teambit/webpack.modules.generate-expose-loaders": "0.0.3",
     "@teambit/webpack.modules.generate-externals": "0.0.3",
-    "@teambit/webpack.modules.config-mutator": "0.0.137",
+    "@teambit/webpack.modules.config-mutator": "0.0.138",
     "@teambit/mdx.modules.mdx-loader": "0.0.489",
     "@teambit/react.babel.bit-react-transformer": "0.0.501",
     "@teambit/webpack.modules.generate-style-loaders": "0.0.103",
     "@teambit/webpack.modules.style-regexps": "0.0.132",
     "@teambit/component-id": "0.0.402",
     "@teambit/toolbox.network.get-port": "0.0.113",
-    "@teambit/config": "0.0.501"
+    "@teambit/react.modules.prerenderer-puppeteer": "0.0.2",
+    "@teambit/config": "0.0.503"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -145,7 +147,7 @@
     "@teambit/react.content.react-overview": "1.95.0"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.268",
+    "@teambit/legacy": "1.0.270",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -209,7 +211,7 @@
         "@types/jest": "^26.0.0"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.268",
+        "@teambit/legacy": "1.0.270",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1652498684867.js → preview-1652785756723.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.731/dist/react.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.731/dist/react.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.734/dist/react.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_react@0.0.734/dist/react.docs.mdx')]

package/webpack/get-exposed-rules.ts

@@ -1,11 +1,13 @@
 import camelcase from 'camelcase';
 import 'expose-loader';
+import { Logger } from '@teambit/logger';
 import { generateExposeLoaders } from '@teambit/webpack.modules.generate-expose-loaders';
+import { resolvePeerToFile } from './resolve-peer';
 
-export function getExposedRules(peers: string[]) {
+export function getExposedRules(peers: string[], logger: Logger, hostRootDir?: string) {
   const loaderPath = require.resolve('expose-loader');
   const depsEntries = peers.map((peer) => ({
-    path: require.resolve(peer),
+    path: resolvePeerToFile(peer, logger, hostRootDir),
     globalName: camelcase(peer.replace('@', '').replace('/', '-'), { pascalCase: true }),
   }));
   return generateExposeLoaders(depsEntries, { loaderPath });

package/webpack/resolve-peer.ts

@@ -0,0 +1,60 @@
+import fs, { realpathSync } from 'fs';
+import { ResolverFactory, CachedInputFileSystem } from 'enhanced-resolve';
+import findRoot from 'find-root';
+import { Logger } from '@teambit/logger';
+
+/**
+ * Get the package folder, and in case it's not found get the resolved file path
+ * @param peerName
+ * @returns
+ */
+export function resolvePeerToDirOrFile(peerName: string, logger: Logger, hostRootDir?: string): string | undefined {
+  let resolved;
+  try {
+    let options;
+    if (hostRootDir) {
+      options = {
+        // resolve the host root dir to its real location, as require.resolve is preserve symlink, so we get wrong result otherwise
+        paths: [realpathSync(hostRootDir), __dirname],
+      };
+    }
+    resolved = require.resolve(peerName, options);
+    const folder = findRoot(resolved);
+    return folder;
+  } catch (e) {
+    if (resolved) {
+      logger.warn(`Couldn't find root dir for "${peerName}" from path "${resolved}" to add it as webpack alias`);
+    } else {
+      logger.warn(`Couldn't resolve "${peerName}" to add it as webpack alias`);
+    }
+    return resolved;
+  }
+}
+
+/**
+ * Make sure to resolve the peer path correctly
+ * we first resolve it to its dir (to be aligned with the aliases transformer)
+ * Then we resolve it to specific file, using enhanced resolve to make sure we resolve it using the correct main fields order
+ * @param peer
+ */
+export function resolvePeerToFile(peer: string, logger: Logger, hostRootDir?: string) {
+  const dirOrFile = resolvePeerToDirOrFile(peer, logger, hostRootDir);
+  const resolver = createResolver();
+  const resolvedFile = resolver.resolveSync({}, '', dirOrFile);
+  return resolvedFile;
+}
+
+/**
+ * Generate a resolver that will read first the module field then the main field
+ * to make it compatible with webpack behavior
+ * @returns
+ */
+function createResolver() {
+  // create a resolver
+  const myResolver = ResolverFactory.createResolver({
+    fileSystem: new CachedInputFileSystem(fs, 4000),
+    useSyncFileSystemCalls: true,
+    mainFields: ['module', 'main'],
+  });
+  return myResolver;
+}

package/webpack/transformers.ts

@@ -1,46 +1,37 @@
-import findRoot from 'find-root';
+import { WebpackConfigTransformContext } from '@teambit/webpack';
 import { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';
 import { Logger } from '@teambit/logger';
+import { getExposedRules } from './get-exposed-rules';
+import { resolvePeerToDirOrFile } from './resolve-peer';
 
 export function generateAddAliasesFromPeersTransformer(peers: string[], logger: Logger) {
-  const peerAliases = peers.reduce((acc, peerName) => {
-    // gets the correct module folder of the package.
-    // this allows us to resolve internal files, for example:
-    // node_modules/react-dom/test-utils
-    //
-    // we can't use require.resolve() because it resolves to a specific file.
-    // for example, if we used "react-dom": require.resolve("react-dom"),
-    // it would try to resolve "react-dom/test-utils" as:
-    // node_modules/react-dom/index.js/test-utils
-    const resolved = getResolvedDirOrFile(peerName, logger);
-    if (resolved) {
-      acc[peerName] = resolved;
-    }
-    return acc;
-  }, {});
-  return (config: WebpackConfigMutator): WebpackConfigMutator => {
+  return (config: WebpackConfigMutator, context: WebpackConfigTransformContext): WebpackConfigMutator => {
+    const peerAliases = peers.reduce((acc, peerName) => {
+      // gets the correct module folder of the package.
+      // this allows us to resolve internal files, for example:
+      // node_modules/react-dom/test-utils
+      //
+      // we can't use require.resolve() because it resolves to a specific file.
+      // for example, if we used "react-dom": require.resolve("react-dom"),
+      // it would try to resolve "react-dom/test-utils" as:
+      // node_modules/react-dom/index.js/test-utils
+      acc[peerName] = resolvePeerToDirOrFile(peerName, logger, context.target.hostRootDir);
+      return acc;
+    }, {});
     config.addAliases(peerAliases);
     return config;
   };
 }
 
 /**
- * Get the package folder, and in case it's not found get the require.resolve path
- * @param peerName
+ * Generate a transformer that expose all the peers as global via the expose loader
+ * @param peers
  * @returns
  */
-function getResolvedDirOrFile(peerName: string, logger: Logger): string | undefined {
-  let resolved;
-  try {
-    resolved = require.resolve(peerName);
-    const folder = findRoot(resolved);
-    return folder;
-  } catch (e) {
-    if (resolved) {
-      logger.warn(`Couldn't find root dir for "${peerName}" from path "${resolved}" to add it as webpack alias`);
-    } else {
-      logger.warn(`Couldn't resolve "${peerName}" to add it as webpack alias`);
-    }
-    return resolved;
-  }
+export function generateExposePeersTransformer(peers: string[], logger: Logger) {
+  return (config: WebpackConfigMutator, context: WebpackConfigTransformContext): WebpackConfigMutator => {
+    const exposedRules = getExposedRules(peers, logger, context.target.hostRootDir);
+    config.addModuleRules(exposedRules);
+    return config;
+  };
 }