Error using Javascript modules Webpack. Function methods not working ("is not a function" error)

Question

I'm just getting started working with webpack, but I'm stumped at a rather simple problem.

To try to solve it, I've been looking around the web, but for some reason I can't find examples using vanilla javascript function methods with webpack. I have no problem exporting, importing, and executing imported functions.

The problem is I can't execute imported function methods, and I don't understand why. The functions are imported correctly, and can be executed. The methods cannot be executed.

In this case, I can execute model(), but when I try to call model.alertone(), I get the error "model.alertone is not a function".

Here is the code:

model.js:

function model() {

    var alertone = () => {alert("This works")};


    return {
        alertone
    }

 };

export default model;

index.js:

import model from "./model.js";


model();
model.alertone();

Webpack configuration:

const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  }
};

Take-Some-Bytes · Accepted Answer · 2020-08-17 16:38:19Z

2

This is not a problem with webpack; this is a problem with your program. Why?

Well, first of all, you wrote your model function to return an object, like so:

function model() {
  // Define the 
  var alertone = () => {alert("This works")};

  // Return an object
  return {
    alertone
  }
};

Then, you imported the model function, and called it:

model();
model.alertone();

But there's a problem with that. The model function returns an object, but it doesn't add any properties to the model function itself. Because of that, the model function will have no properties (except for the native ones), and so you can't call alertone.

You probably meant to do this:

var result = model();
result.alertone();

That's all you need to do.

answered Aug 17, 2020 at 16:38

Take-Some-Bytes

9721 gold badge9 silver badges22 bronze badges

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

1 Comment

heyslevin Over a year ago

This solved it. Thank you for saving me from madness. What a dumb mistake. Thank you so much! If you have any recommendations on terms / concepts I should read up on, I would appreciate it. From your answer and a quick search, maybe that would be Prototyping.

Collectives™ on Stack Overflow

Error using Javascript modules Webpack. Function methods not working ("is not a function" error)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related