"Super expression must either be null or a function" error when deploying minified JavaScript bundle with @okta-react 6.x.x

[BenPiggot]

I'm submitting a:

• Bug report
• Feature request
• Other (Describe below)

Current behavior

When I attempt to deploy a version of the application I am working on using @okta-react 6.x.x and @okta-auth-js 5.x.x using a build process that minifies client-side code, I am seeing the following error:

main.62aa8b49334ffd7907e6.js:75 Uncaught TypeError: Super expression must either be null or a function at main.62aa8b49334ffd7907e6.js:75 at main.62aa8b49334ffd7907e6.js:75 at Module.<anonymous> (main.62aa8b49334ffd7907e6.js:75) at r (main.62aa8b49334ffd7907e6.js:14) at Object.<anonymous> (main.62aa8b49334ffd7907e6.js:64) at r (main.62aa8b49334ffd7907e6.js:14) at Object.<anonymous> (main.62aa8b49334ffd7907e6.js:21) at r (main.62aa8b49334ffd7907e6.js:14) at Object.<anonymous> (main.62aa8b49334ffd7907e6.js:53) at r (main.62aa8b49334ffd7907e6.js:14)

I do not see this error when deploying @okta-react 5.x.x and @okta-auth-js 4.x.x, so something about the version jump is causing this to happen. The error is also not present when I deploy the application without minifying the client-side code.

Expected behavior

I cannot deploy our application in an un-minified state and I also believe using the older versions of @okta-react and @okta-auth-js is causing other problems using more recent versions will solve.

Minimal reproduction of the problem with instructions

The error occurs as part of ci/cd pipeline build:

The relevant package.json is as follows:

{
"name": "static",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"build": "export NODE_OPTIONS=--max_old_space_size=8192 && webpack --mode production",
"build:dev": "export NODE_OPTIONS=--max_old_space_size=8192 && webpack --mode development",
"dev": "webpack-dev-server --config ./webpack.config.local.js --host=0.0.0.0",
"serve": "yarn run build && yarn run start",
"gulp": "gulp",
"test": "jest --silent",
"test:watch": "jest --watch --silent"
},
"jest": {
"setupFiles": [
"/test-setup.js"
],
"moduleNameMapper": {
"\.(css|scss)$": "/test/style-mock.js"
},
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"transform": {
"^.+\.(ts|tsx)$": "ts-jest"
},
"testMatch": [
"**/tests/*.(ts|tsx|js)"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@material-ui/pickers": "4.0.0-alpha.12",
"@okta/okta-auth-js": "5.6.0",
"@okta/okta-react": "6.3.0",
"@types/google.analytics": "^0.0.42",
"all": "^0.0.0",
"csv-string": "3.2.0",
"date-fns": "^2.0.0-alpha.11",
"dotenv": "^10.0.0",
"email-validator": "^2.0.4",
"express": "^4.17.1",
"highcharts": "^8.0.0",
"jwt-decode": "^3.1.2",
"lodash.omit": "^4.5.0",
"morgan": "^1.10.0",
"phone-prettify": "^1.5.1",
"powerbi-client": "^2.10.4",
"powerbi-models": "^1.3.2",
"pretty-checkbox": "^3.0.3",
"qs": "^6.5.1",
"rc-slider": "8.4.1",
"rc-tooltip": "3.7.0",
"react": "^17.0.2",
"react-countdown": "^2.3.2",
"react-dom": "^17.0.2",
"react-input-mask": "^2.0.4",
"react-modal": "^3.4.4",
"react-number-format": "^4.4.1",
"react-redux": "^7.1.0",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-select": "^2.0.0",
"react-spinners": "^0.3.2",
"react-text-mask": "^5.4.3",
"react-timeago": "^6.2.0",
"react-toggle": "^4.0.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"rss-parser": "^3.8.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@babel/preset-env": "^7.16.0",
"@types/enzyme": "^3.1.14",
"@types/node": "^12.12.11",
"@types/rc-slider": "^8.2.3",
"@types/react": "^16.8.19",
"@types/react-dom": "^16.8.4",
"@types/react-router": "^4.0.23",
"@types/react-router-dom": "^5.1.7",
"@types/react-toggle": "^4.0.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-emotion": "^9.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"cross-env": "^5.1.3",
"css-loader": "^0.28.10",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-sass": "^3.1.0",
"html-webpack-plugin": "4.0.0",
"jest": "^23.6.0",
"jest-cli": "^23.6.0",
"node-sass": "^4.8.3",
"react-test-renderer": "^16.5.2",
"redux-mock-store": "^1.5.3",
"sass-loader": "^7.0.1",
"style-loader": "^0.20.3",
"ts-jest": "^23.10.1",
"ts-loader": "^4.0.1",
"typescript": "^4.1.0",
"webpack": "4.19.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^2.0.10",
"webpack-config-utils": "^2.3.0",
"webpack-dev-server": "^3.1.0"
}
}

The webpack file used to generate the bundle is as follows:

{const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
entry: ['whatwg-fetch', 'babel-polyfill', './index.tsx'],
output: {
path: path.resolve(__dirname, '../dist/'),
filename: '[name].[contenthash].js',
publicPath: '/dist/'
},
devServer: {
contentBase: '/dist/'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'env'],
plugins: ['emotion']
}
},
{
test: /.(png|jpe?g|svg)$/i,
loader: 'file-loader',
options: {
publicPath: '../dist/assets',
},
},
{
test: /.s?css$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
templateParameters: {
GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID,
VERSION: process.env.VERSION,
IS_CI_CD: 'TRUE'
},
template: './views/index.ejs',
filename: './index.html',
})
// new BundleAnalyzerPlugin()
]

}

Environment

• Package version: 6.3.0
• React version: 17.0.2
• Browser: Chrome Version 95.0.4638.54
• OS: Mac OS Catalina Version 10.15.7
• Node version (node -v): 14.17.0
• Other:

Configuration

• Okta application type: Single page app

[shuowu]

@BenPiggot I tried a prod build with our react samples which uses react-scripts, but I cannot to reproduce the issue you have. Do you mind to put the minimal reproduction into a Github repo, then we can also look into the problem?

[BenPiggot]

@shuowu How do you do a prod build with react-scripts? I'm trying to create a working example

[shuowu]

@BenPiggot The okta react samples are created by create-react-app with some customization. You can try run npm run build under okta-hosted-login or custom-login folder.

[BenPiggot]

@shuowu Ok, I did that, but that just builds the bundles, but it doesn't serve them. I'm not sure how to do that in the context of the sample app. The problem isn't building the bundles, its that an error is thrown when attempting to render the app with a minified bundle using the react-okta and okta-auth-js

[shuowu]

@BenPiggot Try npm run build, then npm start at the root directory of the samples repo.

[BenPiggot]

@shuowu Ok that works and I don't see any errors with your sample application. I have managed to create a slimmed down version of my application, but it still 10 files. This slimmed-down application is still generating an error when I minify the code as well, but it is a different error. I'm not quite sure how you would like me to provide all the necessary files?

[shuowu]

@BenPiggot You can try the following approaches:

• Push the slimmed-down application to a public GH repo without exposing sensitive information, then our team can investigate based on that.
• Reach out to our support team, then you can share the reproduction steps with them.

I feel the issue might because the webpack production build in some way changed the already built okta-auth-js bundle. Try load the okta-auth-js bundle from the script tag as a workaround, so the auth-js bundle would not be affected.

Check out how to use the CDN bundle from here, the latest version is 5.7.0. Once you have the script loaded, you should be able to access OktaAuth from the browser window object.

[BenPiggot]

Ok - thanks! I'll try these things

[rajuTekion]

Hi @BenPiggot , did you get to solve the above issue? Like @shuowu said, it is occurring only when I set mangle: true for minimizer options in the webpack.prod.babel.js file. Which is also why it is working well in the local server and the non-mangled version of prod build.

I will be following the steps of including the script as a workaround but if you have a better suggestion, it would be great!

[email protected]
[email protected]
[email protected]