Production Build failing due to TypeError: Cannot read property 'emit' of undefined

[mahesha-perpetualny]

I'm submitting this issue for the package(s):

• [ x] okta-react

I'm submitting a:

• [x ] Bug report

Current behavior

Build is failing due to latest release from 3.0.1 to 3.0.3

TypeError: Cannot read property 'emit' of undefined
at AuthService.emit (/home/ubuntu/frontend/node_modules/@okta/okta-react/dist/AuthService.js:558:30)
at AuthService.emitAuthState (/home/ubuntu/frontend/node_modules/@okta/okta-react/dist/AuthService.js:188:12)
at AuthService.clearAuthState (/home/ubuntu/frontend/node_modules/@okta/okta-react/dist/AuthService.js:181:12)
at new AuthService (/home/ubuntu/frontend/node_modules/@okta/okta-react/dist/AuthService.js:84:10)
at /home/ubuntu/frontend/node_modules/@okta/okta-react/dist/Security.js:29:33
at Object.useMemo (/home/ubuntu/frontend/node_modules/react-dom/cjs/react-dom-

Environment

• Package Version: 3.0.3
• OS: ubuntu
• Node version (node -v): 12.15.0

[rupeshbhatti]

I saw the same issue... seems to be a bug that was introduced in one of the recent commits. In our case, downgrading to 3.0.2 seems to have fixed the issue

[shuowu]

@mahesha-perpetualny @rupeshbhatti
Can you try to install @okta/okta-auth-js module in your app with

npm install @okta/okta-auth-js

Basically, the error means the emitter (tiny-emitter) in the authJs instance is not properly defined.

I reproduced the issue in jest test environment in okta/samples-js-react#129. Wondering are you doing SSR in your app?

[arminhaghi]

I see this error after upgrading from 3.0.2 to 3.0.4. Our application is on Next framework and we do have SSR in our app.

[shuowu]

@arminhaghi The issue is the bundler (like webpack) pickup the server bundle instead of the browser one in SSR. Then with the latest change, the AuthService constructor referred to API that only available to the browser bundle (https://github.com/okta/okta-auth-js/blob/master/package.json#L11).

As said in the OKTA REACT SDK readme, it's not suggested to use the SDK for SSR.

Some workarounds you can try:

• only use <Security /> in client
• configure the bundler to pick the browser bundle of @okta/okta-auth-js

[shuowu]

Internal Ref: OKTA-322595

[rupeshbhatti]

In my case the app isn't using SSR

[shuowu]

@rupeshbhatti You can check which auth-js bundle you are using by adding a console.log() in node_modules/@okta/okta-react/dist/AuthService.js constructor, after

 this._oktaAuth = new _oktaAuthJs2.default(authConfig); // line 58 in my local

Then you should be able to see log like okta/samples-js-react#129, check the userAgent field of the _oktaAuth instance to see if a server string is included. With server means it's using a server bundle.

If that's the case, you probably want to check the configure of the bundler to see why it's picking server bundle instead of the browser one.

[ekasprzyk]

@shuowu We're using Next.js, which mixes SSR and client side. We've had the same issue and I can verify the userAgent field contains the word server in it :(. userAgent: 'okta-auth-js-server/3.2.3'.

This seems to be happening on the Next pre-render stage. We've included the <Security> component in _app and that seems to be enough for it to go through the SSR side.

Next.js manages the webpack, so I'm not sure if we can mess around with it. Moving Security out of _app may be too difficult. I can have a look and see what happens.

[swiftone]

@ekasprzyk - I'm not familiar with the details of Next.js (it's been on my personal to-do list for...a while), so I can't say too much, but the key issue seems to be that you're using the server-based auth-js, but okta-react expects the browser-based auth-js.

okta-react wasn't built with SSR in mind, and there are numerous complexities involved if you're trying to mix SSR and client-side rendering.

My rough guess would be to use the server-based auth-js and don't use okta-react if you intend to have SSR of your app, as okta-react isn't yet built with SSR in mind.

[scott-joe]

I ran into this issue because our PWA initializes a bunch of sagas while bootstrapping, including an identity saga calls an auntClient that includes this library. When that's all being spun up in node (ts-node) during our unit tests, it fails. I've moved back to 3.0.2 for now, but would prefer to continue to receive updates.

[aarongranick-okta]

@scott-joe @okta/okta-auth-js is an isomorphic module, it includes implementation for both server and browser clients. The error you are running into probably means that the server code is being used. okta-react is only designed to work with the browser code. When building with webpack, the "browser" entry will be selected automatically: https://github.com/okta/okta-auth-js/blob/3.2/packages/okta-auth-js/package.json#L8

If building using another tool, you may need to adjust the config so it uses the "browser" entrypoint for this module. If you are using jest, the "moduleNameMapper" config will help:

"jest": {
  "moduleNameMapper": {
    "^@okta/okta-auth-js$": "<rootDir>/node_modules/@okta/okta-auth-js/dist/okta-auth-js.min.js"
  }
}

[scott-joe]

We moved some things around, and now the Auth component isn't being kicked off by the init saga, but just to keep everything happy, we added this moduleNameMapper to make sure Jest was running in Browser mode and yeah, you get the point. Thanks for the support @aarongranick-okta!

[scott-joe]

We just ran into this again after someone had to format their machine.

If you run a test in VSCode using the little 'run' button within the test file, it'll follow what preferences you have set for Jestrunner: Jest Command. If you don't have yarn test set in that field, it'll run your browser tests using node and it'll spit out the above error.

Some lessons you have to learn twice...

[swiftone]

@scott-joe - I have definitely had the experience of having a problem that feels vaguely familiar, googling it, and finding a comment I left for my future self explaining what to do :).

I (and I'm sure others) appreciate that you didn't DenverCoder9 this: https://xkcd.com/979/