Getting error on my express project: TypeError: Cannot read properties of undefined (reading 'p-CodePudding

For some reason I'm getting the TypeError: Cannot read properties of undefined (reading 'prototype') on my javascript file. From what I see online, people seem to find that importing {response} from express was the culprit, but I'm not doing any of that.

import { Button } from '../Button';
import "./index.css";
import {clientId,clientSecret} from "./config.json"
import passport from "passport";
const express = require('express');
const app = express();
var DiscordStrategy = require('passport-discord').Strategy;

export const OAuth = (): JSX.Element => {
    var scopes = ['identify', 'guilds', 'guilds.members.read'];

    passport.use(new DiscordStrategy({
        clientID: clientId,
        clientSecret: clientSecret,
        callbackURL: 'http://localhost:3000',
        scope: scopes
    }))

    app.get('/auth/discord', passport.authenticate('discord'));
    app.get('/auth/discord/callback', passport.authenticate('discord', {
        failureRedirect: '/'
    }), function(req:any, res:any) {
        console.log(res)
        res.redirect('http://localhost:3000') // Successful auth
    });

    
    async function openLink(url:any) {
        window.open(url)
    }

    return (
        <div>
            <Button onClick={async() => await openLink("link goes here")} className="discordconnect">
                Connect Discord
            </Button>
        </div>
    );
}

export default OAuth;

CodePudding user response：

TypeError: Cannot read properties of undefined (reading 'prototype')

This error seems to happen when you are trying to run express in a browser environment.

(See code sandbox with the same error)

Express is a web server. It runs on node.js and is typically started from your terminal prompt on your computer. It provides responses to http requests sent from a browser.

React is a front end UI framework that run inside your browser. It manipulates the HTML content displayed on the page according to loaded data and user interaction with that page.

It looks like you are trying to start an express app from a React component running in your browser. This is not supported by Express. Express cannot be run in the browser. In fact, no server can be hosted from a web browser due to browser security policies.

I don't know what it is you are trying to do, but you need to fundamentally rethink your approach here.

Typically when you begin developing this, you would create a server with express that serves a react application. You start the server from your computer's command line terminal, and then navigate to a URL served by that server which loads your react app in your browser.

You never create a server from a React component because that just isn't possible, nor does it make very much sense.