ES modules not working with Next.js

[asanabria-hc]

Describe the bug?

Using ES Module like stated in documentation:

// ES module
import { OktaAuth } from '@okta/okta-auth-js'
const authClient = new OktaAuth(/* configOptions */) 

Results in the following error:

error - SyntaxError: Named export 'BroadcastChannel' not found. The requested module 'broadcast-channel' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'broadcast-channel';
const { BroadcastChannel, createLeaderElection } = pkg;

What is expected to happen?

The application runs properly.

What is the actual behavior?

The application breaks.

Reproduction Steps?

1. Clone https://github.com/asanabria-hc/nextjs-okta-auth-api
2. Install packages and run application on dev mode.
3. Go to http://localhost:3000/api/hello
4. You will see the following error:

SDK Versions

@okta/okta-auth-js: "^6.4.3"

Execution Environment

Node: 16.14.2

Additional Information?

Application runs correctly if importing with require and Common Js.

const OktaAuth = require("@okta/okta-auth-js").OktaAuth;

[shuowu]

Internal Ref: OKTA-491223

[HugoP27]

Hi All, I'm having the same issue. Any fix or workaround by any chance?

[thaiphan]

@HugoP27 Yeah, you can import using require...

const {OktaAuth, toRelativeUrl} = require('@okta/okta-auth-js')

[denysoblohin-okta]

Reason for error: broadcast-channel is an ESM package that's not Node.js compatible.
It should have "type": "module" in package.json + have a .js extension in all imports to be Node.js compatible.
See vercel/next.js#31518
Next.js tries to load broadcast-channel/dist/esnode/index.js (ESM version of module, see package.json) as a CommonJS package but it's not possible.

Solutions:

1. Prepare a PR to broadcast-channel to make it Node.js compatible. Wait for merge and new release, then release new okta-auth-js version. Fix ES module for Node.js pubkey/broadcast-channel#962
2. Workaround - Force using CJS version of broadcast-channel (broadcast-channel/dist/es5node/index.js) for @okta/okta-auth-js

Wokaround for 2 can be one of follows:

1. In next.config.js add

experimental: { esmExternals: false },

2. Install next-transpile-modules package and change next.config.js:

const nextConfig = {
    ...
};
const withTM = require('next-transpile-modules')([
  '@okta/okta-auth-js',
  'broadcast-channel'
]);  
module.exports = withTM(nextConfig);

[denysoblohin-okta]

Please upgrade to 6.6.1 to fix the issue without workarounds

[asanabria-hc]

Now is working as expected on version 6.7.0 🚀