Assets integration: Fix React ES6 Exports (#1098)

* Fixes ES Module exports to add file extensions.

* WIP fix for react exports.

* Revert "WIP fix for react exports."

This reverts commit 57c0b64.

react/gulpfile.js

@@ -68,6 +68,31 @@ function resolvePath(sourcePath, currentFile, opts) {
     if (check.test(sourcePath)) {
       const matches = check.exec(sourcePath);
       resolvedPath = `${rootPath}${matches[1]}`;
+      // ES Modules need to list out the extension on the end of the path,
+      // otherwise index.js will be used instead of index.mjs.
+      if (opts.hasOwnProperty('isES5') && opts.isES5 === false) {
+        // List of exports that are files and not directories.
+        const excludes = [
+          'Input/error',
+          'Input/context',
+          'Input/utility',
+          'Input/validate',
+          'TabContainer/tab',
+          'TabContainer/tab-body',
+          'TabContainer/context',
+          'utilities/componentPropTypeCheck',
+          'Breadcrumb/item',
+          'GenTeaser/utils'
+        ];
+        // If the current path is a file and not a directory...
+        if (excludes.some((rule) => sourcePath.includes(rule))) {
+          // Add the .mjs extension.
+          resolvedPath = `${resolvedPath}.mjs`;
+        } else {
+          // Else, add the path to the index.mjs file the ES module needs.
+          resolvedPath = `${resolvedPath}/index.mjs`;
+        }
+      }
     }
   });
   return resolvedPath || sourcePath;
@@ -112,7 +137,8 @@ function transpileES5() {
           'module-resolver',
           {
             resolvePath,
-            alias: aliases
+            alias: aliases,
+            isES5: true
           }
         ],
         '@babel/plugin-proposal-optional-chaining',
@@ -170,7 +196,8 @@ function transpileES6() {
           'module-resolver',
           {
             resolvePath,
-            alias: aliases
+            alias: aliases,
+            isES5: false
           }
         ],
         '@babel/plugin-proposal-optional-chaining',

react/package.json

@@ -3,8 +3,8 @@
   "description": "React versions of Mayflower design system UI components",
   "author": "Massachusetts Digital Services (MDS)",
   "version": "10.0.0",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
   "sideEffects": [
     "**/*.css",
     "**/*.scss"
@@ -13,6 +13,7 @@
     "dist"
   ],
   "exports": {
+    "import": "./dist/index.mjs",
     "require": "./dist/index.js",
     "default": "./dist/index.mjs"
   },

react/src/components/forms/Form/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormContext } from '../Input/context';
+import { FormContext } from 'MayflowerReactForms/Input/context';
 
 /* eslint-disable react/no-unused-state */
 

react/src/components/forms/Input/error.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ErrorMessage from 'MayflowerReactForms/ErrorMessage';
-import { InputContext } from './context';
+import { InputContext } from 'MayflowerReactForms/Input/context';
 
 class Error extends React.Component {
   displayErrorMessage = (inputContext) => {

react/src/components/forms/Input/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import Label from 'MayflowerReactForms/Label';
-import { InputContext, FormContext } from './context';
+import { InputContext, FormContext } from 'MayflowerReactForms/Input/context';
 
 /* eslint-disable react/no-unused-state */
 

react/src/components/organisms/GenTeaser/index.js

@@ -30,7 +30,7 @@ import PhoneNumber from 'MayflowerReactContact/PhoneNumber';
 import Address from 'MayflowerReactContact/Address';
 import TeaserSearch from 'MayflowerReactGenTeaser/TeaserSearch';
 import TeaserOrgs from 'MayflowerReactGenTeaser/TeaserOrgs';
-import { buildUrl } from './utils';
+import { buildUrl } from 'MayflowerReactOrganisms/GenTeaser/utils';
 
 const GenTeaser = (props) => {
   const {