Error when trying to contact MangoDB server inside a vue 3 component-CodePudding

I'm doing a small hobby project for learning how to connect and read information from a database. Have done it with a local host JSON server, but want to take it a step further. I'm trying to connect to a MongoDB server inside of a Vue 3 component. The end goal is to read user login credentials from a database and compare it to input from a form. But first, I'm trying to get some simple information to work with to learn the basic concepts. This code list the databases I have in my cluster and works fine when I run it through an index.js file with the node terminal (Except the fake connection string).

  const {
        MongoClient
    } = require('mongodb');
    
    async function main() {
        const uriTest = "mongodb srv://notRealUser:[email protected]/database?authSource=admin&retryWrites=true&w=majority"
        const client = new MongoClient(uriTest);
        try {
            await client.connect();
            await listDatabases(client);
            console.log("Connected correctly to server");
        } catch (e) {
            console.error(e);
        } finally {
            await client.close();
        }
    }
    
    main().catch(console.error);
    
    async function listDatabases(clients) {
        const databasesList = await clients.db().admin().listDatabases();
        databasesList.databases.forEach(db => console.log(`${db.name}`));
    }

But whenever I want to run it in my Vue 3 application I get a long error. I get about 27 errors mentioning something similar to this:

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

I searched the internet for an answer and someone mentioned that this could be because of "web pack 5". I would really like to learn how to solve this for a Vue project. Is it a better way to approach this with MongoDB and Vue3? If I'm doing this all wrong please lecture me. Thank you for reading. :)

CodePudding user response：

It's rather not possible to connect to the database directly from the website and even if it's possible, no one will recommend this.

To access any database you should have a code that is running on the server side where malicious users can't access it. This is why web application usually need a backend.