Hello, I’m trying to integrate Okta into a React application using a custom webpack configuration instead of the one created by “create-react-app”, but I’m receiving the error below in the browser:
“Uncaught (in promise) ReferenceError: require is not defined
at eval (index.js:4)
at Module…/node_modules/@okta/okta-react/src/index.js (privatecontent…js:2968)
at webpack_require (main.js:498)
at fn (main.js:835)
at eval (App.tsx:7)
at Module…/src/App.tsx (node_modules_babel-loader_lib_index_js_ruleSet_1_rules_1_src_bootstrap_tsx-node_modules_momen-9008c4.js:22)
at webpack_require (main.js:498)
at fn (main.js:835)
at eval (bootstrap.tsx?./node_modules/babel-loader/lib/index.js??ruleSet[1].rules[1]:6)
at Module…/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[1]!./src/bootstrap.tsx (node_modules_babel-loader_lib_index_js_ruleSet_1_rules_1_src_bootstrap_tsx-node_modules_momen-9008c4.js:36)”
Here is my webpack configuration:
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
const ModuleFederationPlugin = require(“webpack”).container.ModuleFederationPlugin;
const path = require(“path”);
const webpack = require(‘webpack’);
module.exports = {
entry: “./src/index”,
mode: “development”,
devServer: {
contentBase: path.join(__dirname, “dist”),
port: 3001,
historyApiFallback: true,
hot: true
},
output: {
publicPath: “auto”,
},
resolve: {
extensions: [".ts", “.tsx”, “.js”],
},
module: {
rules: [
{
test: /bootstrap.tsx$/,
loader: “bundle-loader”,
options: {
lazy: true,
},
},
{
test: /.tsx?$/,
loader: “babel-loader”,
exclude: /node_modules/,
options: {
presets: ["@babel/preset-react", “@babel/preset-typescript”],
},
},
],
},
};
Any ideas of what is causing this error. It only happens with okta. By simply adding the line below, causes the error:
import { useOktaAuth } from “@okta/okta-react”;