CODEWITHSUNDEEP
javascriptwebpack
Zeng Cheng
Zeng Cheng

Reputation: 825

What's wrong with my webpack file?

OK, let's say on main.js, I have this:

var topMenu = require('./menu.js');
console.log(topMenu.getCount()); // 1
topMenu.increment();
console.log(topMenu.getCount()); // 2

and on menu.js, I have this: 

exports.currentTab = 0;

var count = 1;
exports.increment = function() { count++; };
exports.getCount = function() { return count; };

exports.showSearch = function () {
    $(".about-box").removeClass("active");
    $(".tele-box").removeClass("active");
    $(".tuts-box").addClass("active");

    $(".search-div").toggle();

    if (!$(".search-div").is(":visible")) {
        $(".tuts-box").removeClass("active");
    }

    currentTab = 1;
}

module.exports = [
exports.onKeyPressing = document.onkeypress = function(evt) {
if (evt.keyCode == 49) {
    console.log("Open 1st box");
        showTeles();
    }
if (evt.keyCode == 50) {
    console.log("Open 2nd box");
        showSearch();
    }
if (evt.keyCode == 51) {
    console.log("Open 3rd box");
        showAbout();
    }
}

];

My bundle.js compiles correctly. That, I do know. However, open visiting the page, I get Uncaught TypeError: undefined is not a function on line console.log(topMenu.getCount()); // 1 in main.js (bundle.js since it compiled correctly...)

However, when I remove this and what's inside:

module.exports = [
    ...
];

that is found near the bottom of menu.js, then it works and I get: 

1
2

as expected. What is wrong with my file and how do I fix it? Also, I'm probably defining exports.showSearch() wrong. In all, can you locate the errors I am making while making this file? Thank you.

Upvotes: 0

Views: 1275

Answers (1)

Omid Kamangar
Omid Kamangar

Reputation: 5778

exports is an alias to module.exports. So, when you assign an array to module.exports in this part:

module.exports = [
    ...
];

You are overriding (clearing) the value in module.exports and hence exports. So all of these assignments are lost:

exports.currentTab = 0;

exports.increment = function() { count++; };
exports.getCount = function() { return count; };

exports.showSearch = function () {
  // ...
}

And that's why you get Uncaught TypeError: undefined is not a function. There is no such function as getCount() attached to exports (and topMenu).

Update

I don't know what you want to achieve, but removing the assignment to module.exports might solve the problem:

exports.onKeyPressing = document.onkeypress = function(evt) {
  // ...
}

Again, it depends on what you want to achieve.

Upvotes: 2

Related Questions