fix: esm env var issue - OKTA-407958

.eslintignore

@@ -5,6 +5,7 @@ node_modules
 /build/lib
 /build/types
 /build/cjs
+/build/esm
 /samples/templates
 /samples/generated/webpack-spa/public/*-bundle.*
 /samples/generated/express-direct-auth-dynamic

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 - [#832](https://github.com/okta/okta-auth-js/pull/832) Fixes issues with refresh tokens
 - [#839](https://github.com/okta/okta-auth-js/pull/839) Fixes `@okta/okta-idx-js` missing core-js dependency.
+- [#844](https://github.com/okta/okta-auth-js/pull/844) Fixes ES module includes `SDK_VERSION` placeholder issue
 
 ### Other
 

babel.esm.js

@@ -0,0 +1,22 @@
+const sdkVersion = require('./package.json').version;
+module.exports = {
+  sourceMaps: true,
+  'presets': [
+    '@babel/typescript',
+    [
+      '@babel/preset-env', {
+      'targets': {
+        'esmodules': true
+      },
+      'modules': false
+    }
+  ]],
+  'plugins': [
+    '@babel/plugin-transform-typescript',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-runtime',
+    ['inline-replace-variables', {
+      'SDK_VERSION': sdkVersion
+    }]
+  ]
+};

package.json

@@ -7,7 +7,7 @@
   "license": "Apache-2.0",
   "type": "commonjs",
   "main": "build/cjs/index.js",
-  "module": "build/lib/index.js",
+  "module": "build/esm/index.js",
   "browser": "build/dist/okta-auth-js.umd.js",
   "types": "build/lib/index.d.ts",
   "repository": {
@@ -40,6 +40,7 @@
     "build:cdn": "cross-env NODE_ENV=production webpack --config webpack.cdn.config.js -p",
     "build:web": "cross-env NODE_ENV=production webpack --config webpack.config.js --output-library-target=umd -p",
     "build:cjs": "cross-env babel lib -d build/cjs --config-file ./babel.cjs.js --extensions \".ts\",\".js\" --source-maps",
+    "build:esm": "cross-env babel lib -d build/esm --config-file ./babel.esm.js --extensions \".ts\",\".js\" --source-maps",
     "build:polyfill": "cross-env NODE_ENV=production webpack --config webpack.polyfill.config.js --output-library-target=umd -p",
     "generate:samples": "yarn --cwd samples build && yarn install --ignore-scripts",
     "dev:samples": "yarn --cwd samples dev",

scripts/build.js

@@ -10,15 +10,16 @@ const BUNDLE_LIB_CMD = 'yarn build:web';
 const BUNDLE_CDN_CMD = 'yarn build:cdn';
 const BUNDLE_POLYFILL_CMD = 'yarn build:polyfill';
 const DIST_DIR = `${BUILD_DIR}/dist`; // will be uploaded to CDN
-const BABEL_CMD = 'yarn build:cjs';
-const TS_CMD = 'yarn tsc';
+const BABEL_ESM = 'yarn build:esm';
+const BABEL_CJS = 'yarn build:cjs';
+const TS_CMD = 'yarn tsc --emitDeclarationOnly';
 
 shell.echo('Start building...');
 
 shell.rm('-Rf', `${BUILD_DIR}/*`);
 shell.mkdir('-p', `${DIST_DIR}`);
 
-// Run typescript to generate ESM module source
+// Generate types
 if (shell.exec(TS_CMD).code !== 0) {
   shell.echo(chalk.red('Error: Typescript compilation failed'));
   shell.exit(1);
@@ -43,9 +44,15 @@ if (shell.exec(BUNDLE_POLYFILL_CMD).code !== 0) {
 }
 shell.echo(chalk.green('Webpack completed'));
 
-// Babelify node/server code
-if (shell.exec(BABEL_CMD).code !== 0) {
-  shell.echo(chalk.red('Error: Babel failed'));
+// Babelify ES module
+if (shell.exec(BABEL_ESM).code !== 0) {
+  shell.echo(chalk.red('Error: Babel esm failed'));
+  shell.exit(1);
+}
+
+// Babelify node/server commonJS code
+if (shell.exec(BABEL_CJS).code !== 0) {
+  shell.echo(chalk.red('Error: Babel cjs failed'));
   shell.exit(1);
 }