webpack-pug js function is not a function-CodePudding

Im new to webpack and pug . Working on a small task and

I wrote a function dropDown() in drop.js exported it in index.js file,
tried to put it in PUG file but:
console writing wether 'function is not defined' or f'unction is not a function'.
Please could anyone help me to solve that problem with correct defining js function

here is the link to my webpack.config enter link description here

here is my json file enter link description here

in PUG file i use function like this:

 .searchbox-drop
    button(href="#" data-dropdown='drop1' onclick='dropDown()' aria-controls='drop1' aria-expanded=false class='dropbtn') Вce
       image('triangle','searchbox-drop__icon' )

in index.js

import $ from "jquery";
import 'bootstrap';
import './styles/index.scss';
import {dropDown} from './drop.js';





window.dropDown = dropDown();

in drop.js

export function dropDown(){ 
function show() {
  document.getElementById('myDropdown').classList.toggle('show');
}

//close dropdown id the user cliks outside of it
window.onclick = function(e){
if(!e.target.matches('.dropbtn')){
    var myDropdown = document.getElementById('myDropdown');
    if(myDropdown.classList.contains('show')){
      myDropdown.classList.remove('show');
    }
  }
}

}

here is part of PUG plugin in CONFIG file:

new HtmlWebpackPlugin({
filename: 'index.pug' ,
minify: false,
scriptloading:'blocking',
inject:'body'
}),
new HtmlWebpackPugPlugin()

and here is index.pug

include pug/libs/_libs
include pug/_mixins

doctype html
html(lang='en')
include pug/_head
body
include pug/_header
block content

i dont know what i done, but now i even got this error when click on btnenter image description here

CodePudding user response：

Try to assign the function without invoking it.

window.dropDown = dropDown;

Perhaps this is what you want...

export function dropDown() {
document.getElementById('myDropdown').classList.toggle('show');
}

//close dropdown id the user clicks outside of it
window.onclick = function(e){
if(!e.target.matches('.dropbtn')){
    var myDropdown = document.getElementById('myDropdown');
    if(myDropdown.classList.contains('show')){
      myDropdown.classList.remove('show');
    }
  }
}

CodePudding user response：

Thanks to Steven I finally made few changes that solved an issue. in index.js it goes like :

import $ from "jquery";
import 'bootstrap';
import './styles/index.scss';
import {show} from './drop.js';





window.show= show;
window.onclick = function(e){
if(!e.target.matches('.dropbtn')){
    var myDropdown = document.getElementById('myDropdown');
    if(myDropdown.classList.contains('show')){
      myDropdown.classList.remove('show');
    }
  }
}

and in index.pug:

 onclick = 'show()'