Importing user module in render process

My stack is electron+react+webpack.

What I’m trying to do is to import logout() function from auth.js into my Dashboard.js component. And I set my nodeIntegration to true which I’m not sure if it is a good idea since I’m using Auth0 which is a 3rd party. I found out that there’s some issue with electron 5 but I’m not sure if it is related to my problem.

package.json
  "scripts": {
    "dev:start": "cross-env HOT_MODE=1 webpack-dev-server --config ./configs/webpack.dev.js",
    "dev:electron": "cross-env NODE_ENV=development electron ./app/main.dev.js",
    "dev:backend": "cross-env NODE_ENV=development node ./api/src/server.js",
    "start:prod": "webpack --config webpack.prod.js && electron ."
  },
  "dependencies": {
    "@material-ui/core": "^4.0.0",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.0",
    "@material-ui/system": "^4.0.0",
    "auth0-js": "^9.10.4",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "dotenv": "^8.0.0",
    "electron": "^5.0.1",
    "electron-rebuild": "^1.8.5",
    "express": "^4.17.1",
    "express-jwt": "^5.3.1",
    "html-webpack-plugin": "^3.2.0",
    "jwks-rsa": "^1.5.1",
    "jwt-decode": "^2.2.0",
    "keytar": "^4.9.0",
    "passport": "^0.4.0",
    "passport-auth0": "^1.1.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-beautiful-dnd": "^11.0.3",
    "react-dom": "npm:@hot-loader/react-dom",
    "react-redux": "^7.0.3",
    "react-router-dom": "^5.0.0",
    "recharts": "^1.6.2",
    "redux": "^4.0.1",
    "request": "^2.88.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.32.1",
    "webpack-cli": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "cross-env": "^5.2.0",
    "eslint": "5.3.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "react-hot-loader": "^4.8.7",
    "webpack-dev-server": "^3.4.1"
  }
webpack.dev.js
const webpack = require('webpack');
const path = require('path');
const { spawn } = require('child_process');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    main: path.resolve(__dirname, '../app/src/js/index.js'),
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  target: 'electron-renderer',
  devtool: false,
  devServer: {
    hot: true,
    compress: true,
    watchOptions: {
      aggregateTimeout: 300,
      ignored: /node_modules/,
      poll: 100,
    },
    before() {
      if (process.env.HOT_MODE) {
        console.log('starting...');
        spawn('npm', ['run', 'dev:electron'], {
          shell: true,
          env: process.env,
          stdio: 'inherit',
        })
          .on('close', code => process.exit(code))
          .on('error', err => console.log(err));
      }
    }
  },
  stats: {
    errorDetails: true,
  },
  node: { 
    __dirname: false, 
    __filename: false,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      hash: true,
      template: path.resolve(__dirname, '../app/src/templates/index.html'),
    }),
    new webpack.SourceMapDevToolPlugin({}),
    new webpack.HotModuleReplacementPlugin(),
  ],
};
./app/src/js/utils/auth.js
const keytar = require('keytar');
const request = require('request');

```js
async function logout() {
  return new Promise(resolve => {
    request(`https://${auth0Domain}/v2/logout`, async () => {
      await keytar.deletePassword(keytarService, keytarAccount);
      accessToken = null;
      profile = null;
      refreshToken = null;

      resolve();
    });
  })
}

module.exports = {
  logout,
};
./app/src/js/components/Dashboard/Dashboard.js
import React from 'react';
import clsx from 'clsx';
....
import { mainListItems, secondaryListItems, thirdListItems } from './listItems';
import Chart from './Chart';
import Deposits from './Deposits';
import Orders from './Orders';
import { remote } from 'electron';

/---------problem importing this one---------/
import { remote } from 'electron';
const authService = remote.require('../../utils/auth');
/---------problem importing this one---------/

export default function Dashboard() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);
  const handleDrawerOpen = () => {
    setOpen(true);
  };
  const handleDrawerClose = () => {
    setOpen(false);
  };

  const handleLogout = async () => {
     await authService.logout();
     remote.getCurrentWindow().close();
  }

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="absolute" className={clsx(classes.appBar, open && classes.appBarShift)}>
        <Toolbar className={classes.toolbar}>
          <IconButton
            edge="start"
            color="inherit"
            aria-label="Open drawer"
            onClick={handleDrawerOpen}
            className={clsx(classes.menuButton, open && classes.menuButtonHidden)}
          >
            <MenuIcon />
          </IconButton>
          <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
            Dashboard
          </Typography>
          <IconButton color="inherit">
            <Badge badgeContent={4} color="secondary">
              <NotificationsIcon />
            </Badge>
          </IconButton>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        classes={{
          paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
        }}
        open={open}
      >
        <div className={classes.toolbarIcon}>
          <IconButton onClick={handleDrawerClose}>
            <ChevronLeftIcon />
          </IconButton>
        </div>
        <Divider />
        <List>{mainListItems}</List>
        <Divider />
        <List>{secondaryListItems}</List>
        <Divider />
        <IconButton className="logout-button" onClick={handleLogout}>
          <List>{thirdListItems}</List>
        </IconButton>
      </Drawer>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={3}>
            {/* Chart */}
            <Grid item xs={12} md={8} lg={9}>
              <Paper className={fixedHeightPaper}>
                <Chart />
              </Paper>
            </Grid>
            {/* Recent Deposits */}
            <Grid item xs={12} md={4} lg={3}>
              <Paper className={fixedHeightPaper}>
                <Deposits />
              </Paper>
            </Grid>
            {/* Recent Orders */}
            <Grid item xs={12}>
              <Paper className={classes.paper}>
                <Orders />
              </Paper>
            </Grid>
          </Grid>
        </Container>
        <MadeWithLove />
      </main>
    </div>
  );
};

error :

:smiley: