Open BenPiggot opened 2 years ago
shuowu
commented
2 years ago @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
commented
2 years ago @shuowu How do you do a prod build with react-scripts? I'm trying to create a working example
shuowu
commented
2 years ago @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
commented
2 years ago @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
commented
2 years ago @BenPiggot Try npm run build, then npm start at the root directory of the samples repo.
BenPiggot
commented
2 years ago @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
commented
2 years ago @BenPiggot You can try the following approaches:
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
commented
2 years ago Ok - thanks! I'll try these things
rajuTekion
commented
2 years ago 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!
webpack@4.30.0 terser@3.17.0 terser-webpack-plugin@1.2.3
I'm submitting a:
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
node -v): 14.17.0Configuration