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 }])]
}
]