Flask html templates with node.js: required is not defined-CodePudding

Im making a website with heroku with python Flask

Now I need to connect mongodb database with javascript but it shows this error:

Uncaught ReferenceError: require is not defined
    <anonymous> http://mortis666stocksimulator.herokuapp.com/static/scripts/mongo.js:1

The javascript works before but after I added the line

const { MongoClient } = require('mongodb');

It gives me the error. I tried to fix this so i created another buildpack (heroku/node.js)

And in my project folder I created a package.json

This is the content:

{
    "name": "stocksimulator",
    "version": "1.0.0",
    "description": "First ever website project ",
    "author": "Mortis_666",
    "license": "MIT",
    "dependencies": {
      "mongodb": "^4.3"
    },
    "engines": {
      "node": "16.13.1"
    }
  }

And it still doesnt work
Is there anyway to fix it?

Edit

Guess what? I tried to run the flask file in my local machine. And it gives me the same error.(Even I've already installed node.js)

But when I run the mongo.js file individually, it doesnt gives me error! And the mongodb's function even work!

So it means that the problem now is not about how to install node.js in heroku. Its about how to use node.js in flask

My javascript file is inside the folder static And I'm accessing the javascript file in html file

<script src="{{url_for('static', filename='scripts/mongo.js'}}"></script>

If you want to see the source code you can see it in Github

The html template
The javascript file
The flask file

CodePudding user response：

You do not need JavaScript to connect to MongoDB, you can connect to it directly from your Flask code using the MongoDB Python driver called PyMongo.

Second, any environment variables passed to the frontend so they can be read by JavaScript are publicly available to anybody who views your source. This is VERY INSECURE and no sensitive values should every be passed this way!

Third, if you want your "refresh" button to work, you wouldn't talk to the database directly from the browser with JavaScript. Instead, the easiest thing to do would be to use JavaScript to trigger a browser refresh and refresh the whole page.

<button onclick="location.reload();">

However, if you want to only reload part of the page, the next most simple approach is to render a "partial". You'd create a new Flask route, let's say /stocks/partial, then use JavaScript to call it with fetch(), and that route would only render the part of the the template that listed your stocks. You could then use JavaScript to find where the old list of stocks was in the HTML and replace it.

Finally, the most common way this is done these days is with an API call. You'd set up a route that returns JSON data (for example /api/stocks). You'd then call that route with fetch() and take that data and use javascript, or a frontend templating library, to render the data as HTML. This is why React and Vue are popular; they're frontend template (and component) systems. You build your entire frontend with them and your Flask app becomes nothing but an API backend for the frontend to make calls to.