Module not found: Error: Can't resolve 'process/browser' on CRA

[oregev]

Describe the bug?

After installing @okta/okta-auth-js@latest and @okta/okta-react@latest tying to use the package.

Setup: React 17.0.2 React-scripts: 5.0.0 Webpack: 5.70.0

@okta/okta-auth-js: 6.7.2 @okta/okta-react: 6.6.0

Compiled with problems:

ERROR in ./node_modules/@okta/okta-auth-js/esm/browser/OktaUserAgent.js 35:24-31

Module not found: Error: Can't resolve 'process/browser' in '/Users/or/Projects/multi-farm-dashboard-fr/node_modules/@okta/okta-auth-js/esm/browser' Did you mean 'browser.js'? BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

ERROR in ./node_modules/@okta/okta-auth-js/node_modules/broadcast-channel/dist/esbrowser/util.js 60:58-65

Module not found: Error: Can't resolve 'process/browser' in '/Users/or/Projects/multi-farm-dashboard-fr/node_modules/@okta/okta-auth-js/node_modules/broadcast-channel/dist/esbrowser' Did you mean 'browser.js'? BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

What is expected to happen?

Expected to import oktaAuth in the login file fro this config:

import { OktaAuth } from '@okta/okta-auth-js';

const OKTA_DEV_ENV_CLIENT_ID = '0oaiqne52h4CllwTH357'; const OKTA_DEV_ENV_ISSUER = 'https://dev-185756.okta.com/oauth2/default';

const CLIENT_ID = process.env.SPA_CLIENT_ID || process.env.CLIENT_ID || OKTA_DEV_ENV_CLIENT_ID; const ISSUER = process.env.ISSUER || OKTA_DEV_ENV_ISSUER; const REDIRECT_URI = ${window.location.origin}/login/callback;

const oktaConfig = { clientId: CLIENT_ID, issuer: ISSUER, redirectUri: REDIRECT_URI, scopes: ['openid', 'profile', 'email'], };

export const oktaAuth = new OktaAuth(oktaConfig); // this one

What is the actual behavior?

When importing in the Login file the webpack error appears

Reproduction Steps?

After installing @okta/okta-auth-js@latest and @okta/okta-react@latest tying to use the package.

SDK Versions

@okta/okta-auth-js: 6.7.2 @okta/okta-react: 6.6.0

Execution Environment

Create react app - web

React 17.0.2 React-scripts: 5.0.0 Webpack: 5.70.0

Additional Information?

No response

[oleksandrpravosudko-okta]

@oregev this issue does not seem to trigger for the clean CRA install with specified versions. Do you have customized webpack configuration (ejected app)? Which node version are you on?

[boutell]

Encountering the same issue. Node 16.15.0.

[boutell]

Is there a way to keep the nodejs polyfills out of this build?

[owenashurst]

My colleague managed to resolve this when we came across this issue. This is what we used within our webpack config (if you've ejected). This has been tested using Node 16.x.x.

resolve: {
  alias: {
    process: "process/browser",
  },
  fallback: { "process/browser": require.resolve("process/browser") },
},

Primarily, the fallback line.

[shuowu-okta]

Seems to be related to this Webpack5 issue.

[shuowu-okta]

Internal Ref: OKTA-532554

[aarrohan]

"process/browser": require.resolve("process/browser")

Thanks man it worked perfectly :)

[jaredperreault-okta]

Closing issue. It appears to be related to webpack