build: updates to support Node ESM

.changeset/quiet-glasses-smile.md

@@ -0,0 +1,24 @@
+---
+"@aws-amplify/ui-react-core": patch
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+build: updates to support Node ESM
+
+Confirmed that both #3155 and #3206 are fixed without having to apply any workaround
+
+Also, test out the changes with the following frameworks/tools:
+
+| Name  | Tested? | Notes | 
+|---|---|---|
+| Next.js@11, 12, 13  | ✅ |   |
+| Gatsby | ✅ | Works with ESM. Not support loading CJS build |
+| Remix | ✅ |  | 
+| Astro | ✅ | Works with ESM. Not support loading CJS build | 
+| webpack | ✅ |   |
+| Vite | ✅ | Works with ESM. Not support loading CJS build | 
+| Rollup | ✅ | Works with ESM. Not support loading CJS build | 
+| esbuild | ✅ |   | 
+| Parcel | ✅ |   | 
+| Snowpack | ✅ | Need `--polyfill-node` to fix JS incompatibility in dev mode, but is a known [issue](https://github.com/FredKSchott/snowpack/discussions/718) | 

README.md

@@ -36,13 +36,13 @@ Amplify UI is an open-source UI library with cloud-connected components that are
 
 ## Component Matrix
 
-| **Connected Components** | **React** | **React Native** | **Angular** | **Vue**    |
-| :----------------------- | :-------: | :--------------: | :---------: | :---------:|
-| Authenticator            |  ✅       |     🚧           |   ✅        |   ✅      |
-| In-App Messaging         |  ✅       |     ✅           |             |            |
-| Geo (MapView)            |  ✅       |                  |             |            |
-| Account Settings         |  🚧       |                  |             |            |
-| Storage (FileUploader)   |  🚧       |                  |             |            |
+| **Connected Components** | **React** | **React Native** | **Angular** | **Vue** |
+| :----------------------- | :-------: | :--------------: | :---------: | :-----: |
+| Authenticator            |    ✅     |        🚧        |     ✅      |   ✅    |
+| In-App Messaging         |    ✅     |        ✅        |             |         |
+| Geo (MapView)            |    ✅     |                  |             |         |
+| Account Settings         |    🚧     |                  |             |         |
+| Storage (FileUploader)   |    🚧     |                  |             |         |
 
 | **Primitives**   | **React** | **Angular** | **Vue** |
 | :--------------- | :-------: | :---------: | :-----: |

packages/react-core/package.json

@@ -2,11 +2,11 @@
   "name": "@aws-amplify/ui-react-core",
   "version": "2.1.10",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/index.mjs",
   "react-native": "dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
@@ -38,7 +38,6 @@
     "react": ">= 16.14.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-typescript": "^8.3.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",

packages/react-core/rollup.config.js

@@ -1,7 +1,6 @@
 // rollup.config.js
 import { defineConfig } from 'rollup';
 import typescript from '@rollup/plugin-typescript';
-import commonjs from '@rollup/plugin-commonjs';
 import externals from 'rollup-plugin-node-externals';
 
 const config = defineConfig([
@@ -14,7 +13,6 @@ const config = defineConfig([
       sourcemap: false,
     },
     plugins: [
-      commonjs(),
       externals({ include: /^@aws-amplify/ }),
       typescript({ declarationDir: 'dist/types', sourceMap: false }),
     ],
@@ -25,12 +23,12 @@ const config = defineConfig([
     output: {
       dir: 'dist/esm',
       format: 'es',
+      entryFileNames: '[name].mjs',
       preserveModules: true,
       preserveModulesRoot: 'src',
       sourcemap: false,
     },
     plugins: [
-      commonjs(),
       externals({ include: /^@aws-amplify/ }),
       typescript({ outDir: 'dist/esm', declaration: false, sourceMap: false }),
     ],

packages/react-core/src/InAppMessaging/hooks/useMessage/useMessage.ts

@@ -3,7 +3,7 @@ import {
   InAppMessageInteractionEvent,
   Notifications,
 } from '@aws-amplify/notifications';
-import isNil from 'lodash/isNil';
+import isNil from 'lodash/isNil.js';
 
 import { RenderNothing } from '../../../components';
 import { useInAppMessaging } from '../useInAppMessaging';

packages/react-core/src/utils/index.ts

@@ -1,5 +1,4 @@
-import isEmpty from 'lodash/isEmpty';
-
+import isEmpty from 'lodash/isEmpty.js';
 import { isObject, isString } from '@aws-amplify/ui';
 
 function isEmptyArray<T>(value: T): boolean {

packages/react-core/tsconfig.json

@@ -9,7 +9,7 @@
     "baseUrl": ".",
     "declaration": true,
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "importHelpers": true,
     "moduleResolution": "node",
     "noImplicitAny": true,

packages/react/internal/package.json

@@ -2,6 +2,6 @@
   "private": true,
   "name": "@aws-amplify/ui-react-internal",
   "main": "../dist/internal.js",
-  "module": "../dist/esm/internal.js",
+  "module": "../dist/esm/internal.mjs",
   "types": "../dist/types/internal.d.ts"
 }

packages/react/package.json

@@ -2,15 +2,15 @@
   "name": "@aws-amplify/ui-react",
   "version": "4.3.5",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/index.mjs",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/index.js"
     },
     "./internal": {
-      "import": "./dist/esm/internal.js",
+      "import": "./dist/esm/internal.mjs",
       "require": "./dist/internal.js"
     },
     "./styles.css": "./dist/styles.css",
@@ -40,7 +40,8 @@
     "dev:build": "tsup",
     "clean": "rimraf dist node_modules",
     "lint": "tsc --noEmit --project tsconfig.dev.json && eslint src --ext .js,.ts,.tsx",
-    "test": "yarn test:unit",
+    "test": "yarn test:unit && yarn test:esm",
+    "test:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react\"'",
     "test:watch": "yarn test:unit:watch",
     "test:unit": "jest",
     "test:unit:watch": "jest --watch",
@@ -79,7 +80,6 @@
     }
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-typescript": "^8.3.1",
     "@size-limit/preset-big-lib": "^7.0.8",
     "@svgr/core": "^5.5.0",
@@ -123,31 +123,31 @@
   "size-limit": [
     {
       "name": "Authenticator",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/index.mjs",
       "import": "{ Authenticator }",
       "limit": "120 kB"
     },
     {
       "name": "Geo",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/index.mjs",
       "import": "{ MapView, LocationSearch }",
       "limit": "330 kB"
     },
     {
       "name": "Storage - FileUploader",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/index.mjs",
       "import": "{ FileUploader }",
       "limit": "140 kB"
     },
     {
       "name": "AccountSettings",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/index.mjs",
       "import": "{ AccountSettings }",
       "limit": "60 kB"
     },
     {
       "name": "InAppMessaging",
-      "path": "dist/esm/index.js",
+      "path": "dist/esm/index.mjs",
       "import": "{ InAppMessagingProvider, InAppMessageDisplay }",
       "limit": "110 kB"
     }

packages/react/rollup.config.js

@@ -1,7 +1,6 @@
 // rollup.config.js
 import { defineConfig } from 'rollup';
 import typescript from '@rollup/plugin-typescript';
-import commonjs from '@rollup/plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
 import styles from 'rollup-plugin-styles';
 import externals from 'rollup-plugin-node-externals';
@@ -16,7 +15,6 @@ const config = defineConfig([
       sourcemap: false,
     },
     plugins: [
-      commonjs(),
       externals({ include: /^@aws-amplify/ }),
       typescript({ declarationDir: 'dist/types', sourceMap: false }),
       terser(),
@@ -28,12 +26,12 @@ const config = defineConfig([
     output: {
       dir: 'dist/esm',
       format: 'es',
+      entryFileNames: '[name].mjs',
       preserveModules: true,
       preserveModulesRoot: 'src',
       sourcemap: false,
     },
     plugins: [
-      commonjs(),
       externals({ include: /^@aws-amplify/ }),
       typescript({ outDir: 'dist/esm', declaration: false, sourceMap: false }),
       terser(),

packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
+import isEqual from 'lodash/isEqual.js';
 
 import { Logger } from 'aws-amplify';
 import {

packages/react/src/components/InAppMessaging/hooks/useMessageProps/useMessageProps.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import isEmpty from 'lodash/isEmpty';
+import isEmpty from 'lodash/isEmpty.js';
 import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core';
 
 import { useMessageImage } from '../useMessageImage';

packages/react/src/components/ThemeProvider/index.tsx

@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { DirectionProvider } from '@radix-ui/react-direction';
+import * as RadixDirection from '@radix-ui/react-direction';
 
 import { createTheme, Theme, WebTheme } from '@aws-amplify/ui';
 
 import { AmplifyContext } from './AmplifyContext';
 
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR),
+// the module will be imported as CommonJS module, in which we have to reference the `default`
+let sanitizedRadixDirection = { default: undefined, ...RadixDirection };
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+sanitizedRadixDirection =
+  sanitizedRadixDirection.default ?? sanitizedRadixDirection;
+const { DirectionProvider } = sanitizedRadixDirection;
+
 export type ColorMode = 'system' | 'light' | 'dark';
 export type Direction = 'ltr' | 'rtl';
 

packages/react/src/primitives/Collection/Collection.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import debounce from 'lodash/debounce';
+import debounce from 'lodash/debounce.js';
 import * as React from 'react';
 
 import { Flex } from '../Flex';

packages/react/src/primitives/Expander/Expander.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Root } from '@radix-ui/react-accordion';
+import * as Accordion from '@radix-ui/react-accordion';
 import classNames from 'classnames';
 
 import { useDeprecationWarning } from '../../hooks/useDeprecationWarning';
@@ -9,6 +9,13 @@ import { ExpanderProps } from '../types/expander';
 import { Primitive } from '../types/view';
 import { splitPrimitiveProps } from '../utils/splitPrimitiveProps';
 
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR),
+// the module will be imported as CommonJS module, in which we have to reference the `default`
+let sanitizedAccordion = { default: undefined, ...Accordion };
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+sanitizedAccordion = sanitizedAccordion.default ?? sanitizedAccordion;
+const { Root } = sanitizedAccordion;
+
 const ExpanderPrimitive: Primitive<ExpanderProps, 'div'> = (
   {
     children,

packages/react/src/primitives/Expander/ExpanderItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
+import * as Accordion from '@radix-ui/react-accordion';
 import classNames from 'classnames';
 
 import { ComponentClassNames } from '../shared/constants';
@@ -10,6 +10,13 @@ import { splitPrimitiveProps } from '../utils/splitPrimitiveProps';
 import { useStableId } from '../utils/useStableId';
 import { View } from '../View';
 
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR),
+// the module will be imported as CommonJS module, in which we have to reference the `default`
+let sanitizedAccordion = { default: undefined, ...Accordion };
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+sanitizedAccordion = sanitizedAccordion.default ?? sanitizedAccordion;
+const { Item, Header, Trigger, Content } = sanitizedAccordion;
+
 export const EXPANDER_ITEM_TEST_ID = 'expander-item';
 export const EXPANDER_HEADER_TEST_ID = 'expander-header';
 export const EXPANDER_ICON_TEST_ID = 'expander-icon';

packages/react/src/primitives/Menu/Menu.tsx

@@ -1,17 +1,21 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-} from '@radix-ui/react-dropdown-menu';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
 
 import { ButtonGroup } from '../ButtonGroup';
 import { ComponentClassNames } from '../shared/constants';
 import { IconMenu } from '../Icon/internal';
 import { MenuButton } from './MenuButton';
 import { MenuProps, Primitive } from '../types';
 
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR),
+// the module will be imported as CommonJS module, in which we have to reference the `default`
+let sanitizedDropdown = { default: undefined, ...Dropdown };
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+sanitizedDropdown = sanitizedDropdown.default ?? sanitizedDropdown;
+const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } =
+  sanitizedDropdown;
+
 export const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
 export const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
 

packages/react/src/primitives/Menu/MenuItem.tsx

@@ -1,11 +1,18 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
 
 import { ComponentClassNames } from '../shared/constants';
 import { MenuButton } from './MenuButton';
 import { MenuItemProps } from '../types';
 
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR),
+// the module will be imported as CommonJS module, in which we have to reference the `default`
+let sanitizedDropdown = { default: undefined, ...Dropdown };
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+sanitizedDropdown = sanitizedDropdown.default ?? sanitizedDropdown;
+const { DropdownMenuItem } = sanitizedDropdown;
+
 export const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
 
 /**

packages/react/src/primitives/SliderField/SliderField.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
+import * as RadixSlider from '@radix-ui/react-slider';
 import * as React from 'react';
 
 import { classNameModifier } from '../shared/utils';
@@ -15,6 +15,13 @@ import { splitPrimitiveProps } from '../utils/splitPrimitiveProps';
 import { View } from '../View';
 import { useStableId } from '../utils/useStableId';
 
+// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR),
+// the module will be imported as CommonJS module, in which we have to reference the `default`
+let sanitizedRadixSlider = { default: undefined, ...RadixSlider };
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+sanitizedRadixSlider = sanitizedRadixSlider.default ?? sanitizedRadixSlider;
+const { Range, Root, Thumb, Track } = sanitizedRadixSlider;
+
 export const SLIDER_LABEL_TEST_ID = 'slider-label';
 export const SLIDER_ROOT_TEST_ID = 'slider-root';
 export const SLIDER_TRACK_TEST_ID = 'slider-track';