Multiple errors with auth0 implementation

[QuentinClaes]

I’m having a little bit of an issue when I want to implement auth0 on my project. Whenever I solve one problem I run into another, it’s always the same 3 errors : -require is not a function -window is not defined -missing class properties

I’ve tried solving it by playing with the babelrc , changing the order of the presets

And in webpack I’ve added the famous : “plugins: [new webpack.DefinePlugin({ ‘global.GENTLY’: false })],” in webpack to no avail

I’m providing the package json/ babelrc & webpack without the modifications I cited above so you can see the “base” without the failed attempts at fixing it Also providing the screenshots with the errors

Thanks in advance

Imgur: The magic of the Internet for the errors

this is in babelrc

  {
  "presets": [
    "@babel/preset-react",
    ["@babel/preset-env", { "modules": false }],
    ["@babel/preset-stage-0", { "decoratorsLegacy": true }]
  ],
  "env": {
    "development": {
      "compact": false
    },
    "jest": {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  },
  "plugins": [
    "@babel/plugin-proposal-export-default-from",
    [
      "react-intl",
      {
        "messagesDir": "./extracted_messages/",
        "enforceDescriptions": true
      }
    ]
  ]
}

and this is the webpack

const path = require(‘path’)
const CopyPlugin = require(‘copy-webpack-plugin’)
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
const webpack = require(‘webpack’)

const distDir = path.join(__dirname, ‘…/dist’)
const srcDir = path.join(__dirname, ‘…/src’)

module.exports = [

{
name: ‘client’,
target: ‘web’,
mode: ‘development’,
entry: ${srcDir}/client.jsx,
output: {
path: distDir,
filename: ‘client.js’,
publicPath: ‘/dist/’
},
resolve: {
extensions: [‘.js’, ‘.jsx’, ‘.json’],
alias: {
config: path.join(__dirname, ‘…/config’),
utils: path.join(__dirname, ‘…/src/utils’),
toolbox: path.join(__dirname, ‘…/src/components/toolbox’)
}
},
devtool: ‘source-map’,
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(node_modules/)/,
loader: ‘babel-loader’
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: ‘css-loader’,
options: {
sourceMap: true
}
}
]
},
{
test: /.(jpe?g|png|gif)$/,
loader: ‘file-loader’,
query: { name: ‘assets/images/[name].[ext]’ }
},
{
test: /.(woff2?|eot|ttf|otf)$/,
loader: ‘file-loader’,
query: { name: ‘assets/fonts/[name].[ext]’ }
}
]
},
plugins: [
new webpack.DefinePlugin({ ‘global.GENTLY’: false }),
new MiniCssExtractPlugin({
filename: ‘styles.css’
}),
new CopyPlugin([{ from: ${srcDir}/favicon.ico, to: distDir }])]
},
{
name: ‘server’,
target: ‘node’,
mode: ‘development’,
entry: ${srcDir}/server.jsx,
output: {
path: distDir,
filename: ‘server.js’,
libraryTarget: ‘commonjs2’,
publicPath: ‘/dist/’
},
resolve: {
extensions: [‘.js’, ‘.jsx’, ‘.json’],
alias: {
config: path.join(__dirname, ‘…/config’),
utils: path.join(__dirname, ‘…/src/utils’),
toolbox: path.join(__dirname, ‘…/src/components/toolbox’),
inherits: ‘inherits/inherits_browser.js’,
superagent: ‘superagent/lib/client’,
emitter: ‘component-emitter’,
}
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(node_modules/)/,
loader: ‘babel-loader’
},
{
test: /.css$/,
use: [
{
loader: ‘isomorphic-style-loader’
},
{
loader: ‘css-loader’,
options: {
sourceMap: true
}
}
]
},
{
test: /.(jpe?g|png|gif)$/,
loader: ‘file-loader’,
query: { name: ‘assets/images/[name].[ext]’ }
},
{
test: /.(woff2?|eot|ttf|otf)$/,
loader: ‘file-loader’,
query: { name: ‘assets/fonts/[name].[ext]’ }
}
]
},
plugins: [
new webpack.DefinePlugin({ ‘global.GENTLY’: false }),
new CopyPlugin([{ from: ${srcDir}/favicon.ico, to: distDir }])]
}
]

[dan.woda]

Hi @QuentinClaes,

I apologize in the delayed response. I would like to reopen the topic for discussion if you have not already found a solution.

This error sounds like it has something to do with your node environment. This topic looks like it may discuss what you are dealing with:

NodeJs : TypeError: require(...) is not a function

I hope this helps,
Dan