# Use javascript inside Django Template

**URL:** <https://forum.djangoproject.com/t/use-javascript-inside-django-template/18674>\
**Category:** Templates & Frontend\
**Created:** [February 6, 2023, 2:50pm UTC](https://forum.djangoproject.com/t/use-javascript-inside-django-template/18674 "2023-02-06T14:50:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tjdne9](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/tjdne9/32/12075_2.png) [@Tjdne9](https://forum.djangoproject.com/u/Tjdne9)\
**Post date:** [February 6, 2023, 2:50pm UTC](https://forum.djangoproject.com/t/use-javascript-inside-django-template/18674/1 "2023-02-06T14:50:03Z")

</div>

I’m trying to use my custom JavaScript function from separate `/frontend/libs/map.ts` file inside a Django Template to add different markers in OpenStreetMap dynamically using Leaflet library (`items` are passed from view).

Pseudo-code:

```auto
/frontend/libs/map.ts
---------------------------
function addMarkerToMap(lon,lat) { ..some code.. }

/myapp/templates/myapp/map.html
-----------------------------------------------
{% load static %}
<html><body>...
    <script>addMarkerToMap( {{ item.lon }} , {{ item.lat }} );</script>
...
    <script type="text/javascript" src="{% static 'app.js' %}"></script>
</body></html>

```

When I try to use my custom function I receive an error in Chrome console:

```auto
Uncaught ReferenceError: addMarkerToMap is not defined` error message. 

```

As it’s a bit complex to explain my scenario (TypeScript/webpack etc.) I’ve created the simple example where I can reproduce it: [GitHub - Tjdne9/tests: project for testing](https://github.com/Tjdne9/tests).

So in the simplified scenario, when I try to use JavaScript function defined in `assets/app.js` I will get an error instead of JavaScript popping-up alert with text:

```auto
"Uncaught ReferenceError: greet is not defined"

```

All static files works as expected, for example: webpack correctly generated files `/app/static/img/django.png` and it’s reachable from ‘localhost:8000/static/img/django.png’, same for `app.js` bundle where it works - changes content of webpack element, see console message and even I can see in bundled `app.js` definition of my `greet` function, I just can’t load it in my template).

I can add this function definition in the template itself (fe. index.html) and it will work as expected but the logic for the map will be pretty complex, so I would like to do it on TypeScript side and just reference the index function in index.html but apparently I can’t.

So I just wanted to clarify - Is that even possible? Or I’m wrong already on the concept level and it’s not doable or recommended approach?

* * *

EDIT:  
I finally found the issue, it was related to bundle file generated by webpack.  
First I’ve found that bundle generated additional webpackBootstrap part “/\*\*\*\*\*\*/ (() =\> { // webpackBootstrap” which I’ve tested and when I removed this part it worked as I expected.

Later on I’ve found also the option to use Library in webpack output section - that solved my case: [Authoring Libraries | webpack](https://webpack.js.org/guides/author-libraries/)