WIP fix for react exports.

massgov · Jun 24, 2020 · 57c0b64 · 57c0b64
1 parent 3202eab
commit 57c0b64
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/react/gulpfile.js b/react/gulpfile.js
@@ -1,11 +1,13 @@
+import gulp from 'gulp';
+import babel from 'gulp-babel';
+import rename from 'gulp-rename';
+import del from 'del';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
 const {
   src, dest, series, parallel
-} = require('gulp');
-const babel = require('gulp-babel');
-const rename = require('gulp-rename');
-const del = require('del');
-const path = require('path');
-
+} = gulp;
 function clean() {
   return del(['dist']);
 }
@@ -60,7 +62,7 @@ const sources = [
 ];
 
 function resolvePath(sourcePath, currentFile, opts) {
-  const entryPoint = path.resolve(__dirname, './src/index.js');
+  const entryPoint = path.resolve(path.dirname(fileURLToPath(import.meta.url)), './src/index.js');
   const rootPath = currentFile === entryPoint ? './' : '../';
   let resolvedPath = null;
   Object.keys(opts.alias).forEach((alias) => {
@@ -70,7 +72,7 @@ function resolvePath(sourcePath, currentFile, opts) {
       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) {
+      if (opts.hasOwnProperty('isES5') && opts.isES5 === true) {
         // List of exports that are files and not directories.
         const excludes = [
           'Input/error',
@@ -87,10 +89,10 @@ function resolvePath(sourcePath, currentFile, opts) {
         // 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`;
+          resolvedPath = `${resolvedPath}.cjs`;
         } else {
           // Else, add the path to the index.mjs file the ES module needs.
-          resolvedPath = `${resolvedPath}/index.mjs`;
+          resolvedPath = `${resolvedPath}/index.cjs`;
         }
       }
     }
@@ -100,11 +102,7 @@ function resolvePath(sourcePath, currentFile, opts) {
 
 function transpileES5() {
   return src(sources)
-    .pipe(rename((p) => {
-      const splitPath = p.dirname.split('/');
-      // eslint-disable-next-line no-param-reassign
-      p.dirname = splitPath[splitPath.length - 1];
-    }))
+
     .pipe(babel({
       presets: [
         [
@@ -160,10 +158,22 @@ function transpileES5() {
         'babel-plugin-add-module-exports'
       ]
     }))
+    .pipe(rename((p) => {
+      const splitPath = p.dirname.split('/');
+      // eslint-disable-next-line no-param-reassign
+      p.dirname = splitPath[splitPath.length - 1];
+      // eslint-disable-next-line no-param-reassign
+      p.extname = '.cjs';
+    }))
     .pipe(dest('dist'));
 }
 function transpileES6() {
   return src(sources)
+  .pipe(rename((p) => {
+    const splitPath = p.dirname.split('/');
+    // eslint-disable-next-line no-param-reassign
+    p.dirname = splitPath[splitPath.length - 1];
+  }))
     .pipe(babel({
       presets: [
         [
@@ -218,13 +228,7 @@ function transpileES6() {
         ]
       ]
     }))
-    .pipe(rename((p) => {
-      const splitPath = p.dirname.split('/');
-      // eslint-disable-next-line no-param-reassign
-      p.dirname = splitPath[splitPath.length - 1];
-      // eslint-disable-next-line no-param-reassign
-      p.extname = '.mjs';
-    }))
+
     .pipe(dest('dist'));
 }
-exports.default = series(clean, parallel(transpileES5, transpileES6, styles, icons));
+export default series(clean, parallel(transpileES5, transpileES6, styles, icons));
diff --git a/react/package.json b/react/package.json
@@ -3,8 +3,9 @@
   "description": "React versions of Mayflower design system UI components",
   "author": "Massachusetts Digital Services (MDS)",
   "version": "10.0.0",
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "type": "module",
   "sideEffects": [
     "**/*.css",
     "**/*.scss"
@@ -13,9 +14,9 @@
     "dist"
   ],
   "exports": {
-    "import": "./dist/index.mjs",
-    "require": "./dist/index.js",
-    "default": "./dist/index.mjs"
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs",
+    "default": "./dist/index.js"
   },
   "scripts": {
     "backstop:test": "docker-compose run backstop test --rm",