Django: How to import a javascript inside another javascript file

Question

How to import inside JavaScript files and using Django to load another js.

Statements like these don't work:

import { PolymerElement, html } from '{% static "@polymer/polymer/polymer-element.js" %}';
import '{% static "@polymer/app-layout/app-drawer/app-drawer.js" %}';

And also these too:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';

// myapp-shell.js
import `${static_path}`;
//....

<!DOCTYPE html>
<html lang="en">
    <head>
        {% load static %}
        <script src="{% static 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js' %}"></script>
        <script src="{% static 'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js' %}"></script>

        <!-- Loading app-shell -->
        <script>
            var static_path = '{% static "my-icons.js" %}';
            console.log(static_path);
        </script>
        <script type="module" src="{% static 'mycomponents/myapp-shell.js' %}"></script>
    </head>
    <body>
        <myapp-shell></myapp-shell>
    </body>
</html>

Is there is a way to do that without bundling the code in one big file, nor calling all files may be needed in the html file. Thank you

whusterj · Accepted Answer · 2018-09-21 19:09:07Z

5

It's definitely not right to use Django template tags inside your JS files, since they will not be processed by Django's template loader. I'd suggest either:

(a) Use only relative path imports in your JS files.

or

(b) Set up your Django STATICFILE_DIRS setting to include the node_modules directory and setting STATIC_ROOT to something like '/static'. Then do your module imports as import { x } from '/static/path/to/module'.

EDIT: Grammar

answered Sep 21, 2018 at 19:09

whusterj

3,4291 gold badge19 silver badges14 bronze badges

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

Comments

Suraj Rao · Accepted Answer · 2021-02-11 11:51:18Z

2

I searched that for a long time and the way I found to do that is:

inside your mains script use this function.

function include(file) { 
  
    var script  = document.createElement('script'); 
    script.src  = file; 
    script.type = 'text/javascript'; 
    script.defer = true; 
    
    document.getElementsByTagName('head').item(0).appendChild(script); 
    
}

then load your script like this:

include('/static/js/your_js_file.js');

don't forget to register your static files directory in settings.py

example:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "your_folder of library"),
]

edited Feb 11, 2021 at 11:51

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Feb 11, 2021 at 11:41

user13641468

Comments

juancarlos · Accepted Answer · 2018-09-21 16:43:05Z

-1

Mabe you can use a global variable at top of your js importations, because static it's only for django template, you can do something like this inside your template file:

<script>
    var static_path = '{% static "@polymer/polymer/" %}';
</script>

end then import your js files using this path

import { PolymerElement, html } from `${static_path}/polymer-element.js" %}`;

answered Sep 21, 2018 at 16:43

juancarlos

6314 silver badges10 bronze badges

8 Comments

Nomad Over a year ago

sorry, but it causes a syntax error. I tried some variation of this method and it didn't work.

juancarlos Over a year ago

remember if you want import in a js file you must be set type to module so in your js file you want import mustbe declare like this <script type="module" src="your_path" ></script>

Nomad Over a year ago

var static_path = '{% static "my-icons.js" %}'; import ${static_path}; myapp-shell.js:29 Uncaught SyntaxError: Unexpected template string

juancarlos Over a year ago

import ${static_path} or import ${static_path} ?

whusterj Over a year ago

It's definitely not right to use Django template tags inside your JS files, since they will not be processed by Django's template loader. I'd suggest either (a) using only relative path imports in your JS file or (b) setting up your Django STATICFILE_DIRS setting to include the node_modules directory and setting STATIC_ROOT to something like '/static'. Then do your module imports as import { x } from '/static/path/to/module'

|

Collectives™ on Stack Overflow

Django: How to import a javascript inside another javascript file

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related