Correct way of importing in javascript while using Flask

Question

I just started JavaScript. I wrote some code with javascript using the library: Three.js, now I wanted to do the Backend with Python. Therefore i started using Flask. So I have my index.html in the templates directory, inside my index.html i call my script.js like this:

<script type="module" src="/static/script.js"></script>

In my script.js I import three.js in the beginning like this:

import "/three.js"

The Three.js file is in the same static folder. But somehow the import doesnt work when i use Flask.

Stephen.W · Accepted Answer · 2019-12-16 18:17:27Z

1

First of all, the 'import' statement hasn't yet widely supported by browsers, so if you really want to use it, you have to use a module bundler e.g. webpack, broswerify, to wrap all files into one big js file. However, if you are not familiar with those tools, to be honest, you have to spend many time to learn how to use them.

So I recommend you to keep things simple. For example, you can first make a copy of the library's source code and save it to your project's static folder, so that it can be served publicly. Second, you can create a HTML file, with following template:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="/static/three.js"></script>
        <script src="/static/script.js">
    </body>
</html>

P.S. this example is from Three.js offical document, with a little modification.

Since all scripts in a HTML share a same global environment, after the first <script> tag is loaded, the code in the next <script> tag can access three.js's global variable that is loaded before!

edited Dec 16, 2019 at 18:17

answered Dec 16, 2019 at 18:06

Stephen.W

2,1961 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

msanford Over a year ago

I've deleted my comment on the question since this is a great answer. I'd add, since this might not be obvious to OP but that we often take for granted: the UI code is completely disconnected from Flask and has basically nothing to do with it. You write JS and HTML and send it naively to the browser, who then executes it. I intuit that OP might be conflating ES6 import {} from "module" with Python's import <module>...

Stephen.W Over a year ago

Yeah, I ghest @Oroshimaru is not familiar with writing website codes. No judgement.

msanford Over a year ago

Certainly not, I'm merely augmenting your good answer with some more information that might be glossed over as assumed. :) You would even edit your answer to add that, and flag my comment as "No longer needed" if you like.

Oroshimaru Over a year ago

@Stephen.W Thank you for your answer! Yes im new to writing website codes. Just one last Question, in my Script I have imports like import {STLLoader} from "/STLLoader.js". But when I import the STLLoader in the html file like you did my code wont work anymore. Do you know how to fix that? I tried things like changing my code from new STLloader()to new STLLoader.STLloader() but that didnt work either.

Oroshimaru Over a year ago

And I also just recognized that the STLLoader.js is also importing from three.module.js.. So that wont work either ?

|

Isuruse · Accepted Answer · 2019-12-16 17:49:11Z

0

flask is mirco framework, so you need to follow the documentation instruction on using static files.

have a look on this post

where to keep js files in Flask applications?

answered Dec 16, 2019 at 17:49

Isuruse

461 silver badge4 bronze badges

1 Comment

Oroshimaru Over a year ago

I have my .js files in a stativ folder and my html files in the template folder. the porblem is im trying to use a js script inside another js script

Collectives™ on Stack Overflow

Correct way of importing in javascript while using Flask

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related