fix(@aws-amplify/ui-react): Export CJS

packages/amplify-ui-react/.npmignore

@@ -0,0 +1,16 @@
+__mocks__/**
+__tests__/**
+coverage/**
+docs/**
+media/**
+node_modules/**
+test_Setup/**
+.vscode/**
+.DS_Store
+*.log
+lib/.tsbuildinfo
+lib-esm/.tsbuildinfo
+prepend-license.js
+cypress/**
+cypress.json
+tsc-out/**

packages/amplify-ui-react/build.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const build = require('../../scripts/build');
+
+build(process.argv[2], process.argv[3]);

packages/amplify-ui-react/package.json

@@ -11,15 +11,18 @@
 		"url": "https://github.com/aws-amplify/amplify-js.git"
 	},
 	"scripts": {
-		"build": "npm run clean && npm run compile",
-		"build:watch": "tsc -w",
-		"clean": "rm -rf dist",
-		"compile": "npm run tsc",
-		"tsc": "tsc -p ."
+		"build-with-test": "npm test && npm run build",
+		"build:cjs": "node ./build es5 && webpack && webpack --config ./webpack.config.dev.js",
+		"build:esm": "node ./build es6",
+		"build:cjs:watch": "node ./build es5 --watch",
+		"build:esm:watch": "node ./build es6 --watch",
+		"build:watch": "npm run build:esm:watch",
+		"build": "npm run clean && npm run build:cjs && npm run build:esm",
+		"clean": "rimraf lib-esm lib dist"
 	},
-	"main": "./dist/index.js",
-	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"main": "./lib/index.js",
+	"module": "./lib-esm/index.js",
+	"typings": "./lib-esm/index.d.ts",
 	"files": [
 		"dist/"
 	],

packages/amplify-ui-react/webpack.config.dev.js

@@ -0,0 +1,6 @@
+var config = require('./webpack.config.js');
+
+var entry = {
+	'@aws-amplify/ui-react': './lib/index.js',
+};
+module.exports = Object.assign(config, { entry, mode: 'development' });

packages/amplify-ui-react/webpack.config.js

@@ -0,0 +1,53 @@
+module.exports = {
+	entry: {
+		'aws-amplify-react.min': './lib/index.js',
+	},
+	externals: [
+		'@aws-amplify/auth',
+		'@aws-amplify/analytics',
+		'@aws-amplify/api',
+		'@aws-amplify/core',
+		'@aws-amplify/interactions',
+		'@aws-amplify/storage',
+		'@aws-amplify/ui',
+		'@aws-amplify/ui/dist/style.css',
+		'@aws-amplify/xr',
+		'aws-amplify',
+		'react',
+	],
+	output: {
+		filename: '[name].js',
+		path: __dirname + '/dist',
+		library: 'aws_amplify_react',
+		libraryTarget: 'umd',
+		umdNamedDefine: true,
+		globalObject: 'this',
+		devtoolModuleFilenameTemplate: require('../aws-amplify/webpack-utils')
+			.devtoolModuleFilenameTemplate,
+	},
+	// Enable sourcemaps for debugging webpack's output.
+	devtool: 'source-map',
+	resolve: {
+		extensions: ['.js', '.json'],
+	},
+	mode: 'production',
+	module: {
+		rules: [
+			// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+			//{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
+			{
+				test: /\.js?$/,
+				exclude: /node_modules/,
+				use: [
+					'babel-loader',
+					{
+						loader: 'babel-loader',
+						options: {
+							presets: ['@babel/preset-env'],
+						},
+					},
+				],
+			},
+		],
+	},
+};

scripts/build.js

@@ -148,9 +148,14 @@ function reportWatchStatusChanged(diagnostic, newLine, options, errorCount) {
 }
 
 async function buildES5(typeScriptCompiler) {
-	const jsx = packageInfo.name === 'aws-amplify-react' ? 'react' : undefined;
+	const jsx = ['@aws-amplify/ui-react', 'aws-amplify-react'].includes(
+		packageInfo.name
+	)
+		? 'react'
+		: undefined;
 	// tsconfig for ES5 generating
 	let compilerOptions = {
+		esModuleInterop: true,
 		noImplicitAny: false,
 		lib: ['dom', 'es2017', 'esnext.asynciterable'],
 		downlevelIteration: true,
@@ -188,9 +193,14 @@ async function buildES5(typeScriptCompiler) {
 }
 
 function buildES6(typeScriptCompiler) {
-	const jsx = packageInfo.name === 'aws-amplify-react' ? 'react' : undefined;
+	const jsx = ['@aws-amplify/ui-react', 'aws-amplify-react'].includes(
+		packageInfo.name
+	)
+		? 'react'
+		: undefined;
 	// tsconfig for ESM generating
 	let compilerOptions = {
+		esModuleInterop: true,
 		noImplicitAny: false,
 		lib: ['dom', 'es2017', 'esnext.asynciterable'],
 		downlevelIteration: true,