fix: modules

.babelrc.js

@@ -1,3 +1,5 @@
+const BABEL_ENV = process.env.BABEL_ENV;
+
 module.exports = {
   plugins: ["@babel/plugin-transform-runtime"],
   presets: [
@@ -7,6 +9,7 @@ module.exports = {
       {
         useBuiltIns: "entry",
         corejs: "3.23",
+        modules: BABEL_ENV === 'esm' ? false : 'commonjs',
         browserslistEnv: "production"
       },
     ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boomerang-io/carbon-addons-boomerang-react",
-  "version": "2.0.10-alpha.1",
+  "version": "2.0.10-alpha.2",
   "license": "Apache-2",
   "repository": {
     "type": "git",

scripts/build.js

@@ -23,22 +23,12 @@ async function build() {
 
     // Compile ES and CJS versions of the lib
     exec(`"${babelPath}" src --quiet -d es --ignore "${ignoreGlobs}"`, {
-      BABEL_ENV: 'es',
+      BABEL_ENV: 'esm',
     });
     exec(`"${babelPath}" src --quiet -d lib --ignore "${ignoreGlobs}"`, {
       BABEL_ENV: 'cjs',
     });
 
-    // Copy over package.json file for interal libs
-    await cpy('**/package.json', '../lib', {
-      parents: true,
-      cwd: path.resolve(process.cwd(), 'src'),
-    });
-    await cpy('**/package.json', '../es', {
-      parents: true,
-      cwd: path.resolve(process.cwd(), 'src'),
-    });
-
     // Copy over SCSS
     await cpy('**/*.scss', '../styles/scss', {
       parents: true,

src/Welcome.stories.js → src/Welcome.stories.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import './welcome-story.css';
-import BoomerangLogo from '../.storybook/assets/boomerang';
+import React from "react";
+import "./welcome-story.css";
+import BoomerangLogo from "../.storybook/assets/boomerang";
 import {
   Accordion,
   AccordionItem,
@@ -9,51 +9,50 @@ import {
   StructuredListBody,
   StructuredListRow,
   StructuredListCell,
-} from './index';
+} from "./index";
 
 //const carbonExports = Object.keys(require('carbon-components-react'));
-const boomerangAddonsExports = Object.keys(require('./index'));
+const boomerangAddonsExports = Object.keys(require("./index"));
 
 export default {
-  title: 'Getting Started|Welcome',
+  title: "Getting Started|Welcome",
 };
 
 export const AboutStorybook = () => (
   <div className="storybook-welcome">
-    <BoomerangLogo style={{ marginLeft: '1rem' }} />
+    <BoomerangLogo style={{ marginLeft: "1rem" }} />
     <p>
-      Storybook is a development environment for UI components. It allows you to browse the
-      component library, view the different states of each component, and interactively develop and
-      test components.
+      Storybook is a development environment for UI components. It allows you to browse the component library, view the
+      different states of each component, and interactively develop and test components.
     </p>
     <p>
-      <strong>Boomerang</strong> - Components that are either extensions of Carbon components with
-      added functionality, or custom components beyond Carbon.
+      <strong>Boomerang</strong> - Components that are either extensions of Carbon components with added functionality,
+      or custom components beyond Carbon.
     </p>
     <p>
-      <strong>Boomerang Experimental</strong> - Similar to above, but these components are not yet
-      finalized or stable. The APIs of these components may change rapidly and are not required to
-      have associated tests, including snapshots.
+      <strong>Boomerang Experimental</strong> - Similar to above, but these components are not yet finalized or stable.
+      The APIs of these components may change rapidly and are not required to have associated tests, including
+      snapshots.
     </p>
     <p>
-      <strong>Carbon</strong> - Components imported from Carbon and re-exported with no
-      modifications. Carbon's stories are not included in our storybook, please reference their
-      <a href="https://react.carbondesignsystem.com/" style={{ marginLeft: '0.15rem' }}>
+      <strong>Carbon</strong> - Components imported from Carbon and re-exported with no modifications. Carbon's stories
+      are not included in our storybook, please reference their
+      <a href="https://react.carbondesignsystem.com/" style={{ marginLeft: "0.15rem" }}>
         Carbon Storybook
       </a>
     </p>
 
     <p>
       For additional guidance, see the
-      <a href="https://www.carbondesignsystem.com/" style={{ marginLeft: '0.15rem' }}>
+      <a href="https://www.carbondesignsystem.com/" style={{ marginLeft: "0.15rem" }}>
         Carbon Design Site
       </a>
     </p>
     <Accordion>
-      <AccordionItem title={'Carbon and Boomerang Addons Component Exports table'} open={false}>
+      <AccordionItem title={"Carbon and Boomerang Addons Component Exports table"} open={false}>
         <p>
-          The following table displays a list of the total exported components: including our custom
-          Boomerang compoonents and unaltered carbon-components
+          The following table displays a list of the total exported components: including our custom Boomerang
+          compoonents and unaltered carbon-components
         </p>
         <StructuredListWrapper>
           <StructuredListHead>
@@ -62,7 +61,7 @@ export const AboutStorybook = () => (
           <StructuredListBody>
             {[...new Set(boomerangAddonsExports)].map((item) => (
               <StructuredListRow key={item}>
-                <StructuredListCell>{item === 'styles' ? null : item}</StructuredListCell>
+                <StructuredListCell>{item === "styles" ? null : item}</StructuredListCell>
               </StructuredListRow>
             ))}
           </StructuredListBody>