JS modules - ReferenceError: is not defined











up vote
0
down vote

favorite












I'm trying to import a js function from an external .js file using the "module" type but I keep getting the error "ReferenceError: polygonClick is not defined".



Here's my code:



HTML:



<!DOCTYPE html>
<html>
<head>
...
<script src="js/map.js" type="module"></script>
</head>
<body>
...
<script>
function initMap() {
...
$.getJSON( "./DI.json", function( coords ) {
var building = new google.maps.Polygon({...});
building.setMap(map);

building.addListener('click', (event) => polygonClick(event));
});
...
}
</script>
</body>
</html>


JS:



import {MDCDrawer} from './@material/drawer';

export default { polygonClick };

const drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

function polygonClick(event) {
console.log(event);
}


Can someone tell me what I'm doing wrong pls?



Thank you in advance!










share|improve this question






















  • Make your second script a module as well and import the polygonClick function from the first one. Otherwise it will stay in the module's scope - unlike normal scripts, module code does not run in the global scope.
    – Bergi
    Nov 12 at 19:16












  • @Bergi What do you define as my second script ? The whole initMap function ?
    – Asfourhundred
    Nov 16 at 21:22










  • Yes, that script. Although it's not clear where you are calling initMap from.
    – Bergi
    Nov 16 at 22:14















up vote
0
down vote

favorite












I'm trying to import a js function from an external .js file using the "module" type but I keep getting the error "ReferenceError: polygonClick is not defined".



Here's my code:



HTML:



<!DOCTYPE html>
<html>
<head>
...
<script src="js/map.js" type="module"></script>
</head>
<body>
...
<script>
function initMap() {
...
$.getJSON( "./DI.json", function( coords ) {
var building = new google.maps.Polygon({...});
building.setMap(map);

building.addListener('click', (event) => polygonClick(event));
});
...
}
</script>
</body>
</html>


JS:



import {MDCDrawer} from './@material/drawer';

export default { polygonClick };

const drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

function polygonClick(event) {
console.log(event);
}


Can someone tell me what I'm doing wrong pls?



Thank you in advance!










share|improve this question






















  • Make your second script a module as well and import the polygonClick function from the first one. Otherwise it will stay in the module's scope - unlike normal scripts, module code does not run in the global scope.
    – Bergi
    Nov 12 at 19:16












  • @Bergi What do you define as my second script ? The whole initMap function ?
    – Asfourhundred
    Nov 16 at 21:22










  • Yes, that script. Although it's not clear where you are calling initMap from.
    – Bergi
    Nov 16 at 22:14













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I'm trying to import a js function from an external .js file using the "module" type but I keep getting the error "ReferenceError: polygonClick is not defined".



Here's my code:



HTML:



<!DOCTYPE html>
<html>
<head>
...
<script src="js/map.js" type="module"></script>
</head>
<body>
...
<script>
function initMap() {
...
$.getJSON( "./DI.json", function( coords ) {
var building = new google.maps.Polygon({...});
building.setMap(map);

building.addListener('click', (event) => polygonClick(event));
});
...
}
</script>
</body>
</html>


JS:



import {MDCDrawer} from './@material/drawer';

export default { polygonClick };

const drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

function polygonClick(event) {
console.log(event);
}


Can someone tell me what I'm doing wrong pls?



Thank you in advance!










share|improve this question













I'm trying to import a js function from an external .js file using the "module" type but I keep getting the error "ReferenceError: polygonClick is not defined".



Here's my code:



HTML:



<!DOCTYPE html>
<html>
<head>
...
<script src="js/map.js" type="module"></script>
</head>
<body>
...
<script>
function initMap() {
...
$.getJSON( "./DI.json", function( coords ) {
var building = new google.maps.Polygon({...});
building.setMap(map);

building.addListener('click', (event) => polygonClick(event));
});
...
}
</script>
</body>
</html>


JS:



import {MDCDrawer} from './@material/drawer';

export default { polygonClick };

const drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

function polygonClick(event) {
console.log(event);
}


Can someone tell me what I'm doing wrong pls?



Thank you in advance!







javascript html material-design referenceerror






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 12 at 18:43









Asfourhundred

3518




3518












  • Make your second script a module as well and import the polygonClick function from the first one. Otherwise it will stay in the module's scope - unlike normal scripts, module code does not run in the global scope.
    – Bergi
    Nov 12 at 19:16












  • @Bergi What do you define as my second script ? The whole initMap function ?
    – Asfourhundred
    Nov 16 at 21:22










  • Yes, that script. Although it's not clear where you are calling initMap from.
    – Bergi
    Nov 16 at 22:14


















  • Make your second script a module as well and import the polygonClick function from the first one. Otherwise it will stay in the module's scope - unlike normal scripts, module code does not run in the global scope.
    – Bergi
    Nov 12 at 19:16












  • @Bergi What do you define as my second script ? The whole initMap function ?
    – Asfourhundred
    Nov 16 at 21:22










  • Yes, that script. Although it's not clear where you are calling initMap from.
    – Bergi
    Nov 16 at 22:14
















Make your second script a module as well and import the polygonClick function from the first one. Otherwise it will stay in the module's scope - unlike normal scripts, module code does not run in the global scope.
– Bergi
Nov 12 at 19:16






Make your second script a module as well and import the polygonClick function from the first one. Otherwise it will stay in the module's scope - unlike normal scripts, module code does not run in the global scope.
– Bergi
Nov 12 at 19:16














@Bergi What do you define as my second script ? The whole initMap function ?
– Asfourhundred
Nov 16 at 21:22




@Bergi What do you define as my second script ? The whole initMap function ?
– Asfourhundred
Nov 16 at 21:22












Yes, that script. Although it's not clear where you are calling initMap from.
– Bergi
Nov 16 at 22:14




Yes, that script. Although it's not clear where you are calling initMap from.
– Bergi
Nov 16 at 22:14

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268248%2fjs-modules-referenceerror-function-is-not-defined%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268248%2fjs-modules-referenceerror-function-is-not-defined%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

mysqli_query(): Empty query in /home/lucindabrummitt/public_html/blog/wp-includes/wp-db.php on line 1924

How to change which sound is reproduced for terminal bell?

Can I use Tabulator js library in my java Spring + Thymeleaf project?