63

Suppose if I define a class in file1.js

function Customer(){
    this.name="Jhon";
    this.getName=function(){
        return this.name;
    };
};

Now if I want to create a Customer object in file2.js

var customer=new Customer();
var name=customer.getName();

I am getting exception: Customer is undefined, not a constructor.

But when i create a customer object in file2.js and pass it to file1.js then its working .

file1.js

    function Customer(){
        this.name="Jhon";
        this.getName=function(){
            return this.name;
        }
    }
    function customer(){
        return new Customer();
    }

file2.js

    var customer=customer();
    var name=customer.getName();

but i want to create a customer object in file1.js using new Customer(). How can i achieve that?

0

7 Answers 7

47

It depends on what environment you're running in. In a web browser you simply need to make sure that file1.js is loaded before file2.js:

<script src="file1.js"></script>
<script src="file2.js"></script>

In node.js, the recommended way is to make file1 a module then you can load it with the require function:

require('path/to/file1.js');

It's also possible to use node's module style in HTML using the require.js library.

5
  • Thank you! I needed to break up my React file into multiple classes and I couldn't use the require because it's not supported in the web browser. I can just simple reference class component A from class component B without any require, import or export. I simply needed to load FileA before File B.
    – Thuy
    Commented Jun 29, 2021 at 20:18
  • @Thuy React jsx compiler automatically splits your project into multiple small js files. Are you not using jsx?
    – slebetman
    Commented Jun 30, 2021 at 2:08
  • I can't install nodejs in my project web resources, so I need to link all of the React files necessary in the HTML file. That way, I don't need the require when one React file refers to another file.
    – Thuy
    Commented Jul 6, 2021 at 18:38
  • You only need node.js on your development PC/Mac/Laptop. You don't need it on your server. React compiles everything to static html and js files that you can then serve on anything
    – slebetman
    Commented Jul 7, 2021 at 5:46
  • You need node.js to write react code. You don't need node.js to run react code. Think of node.js as the compiler for React projects.
    – slebetman
    Commented Jul 7, 2021 at 5:47
28
// Create Customer class as follows:
export default class Customer {
   getName() {
     return 'stackoverflow';
   }
}

// Import the class 
// no need for .js extension in path cos it gets inferred automatically
import Customer from './path/to/Customer'; 
// OR
const Customer = require('./path/to/Customer') 

// Use the class
var customer = new Customer();
var name = customer.getName();
5
  • 2
    Although this solution works like a charm, this needs babel setup in the nodejs config. Learn't it the hard way!
    – Krishna
    Commented Oct 4, 2019 at 3:34
  • @Krishna -- this could be my issue. When the class is defined in a separate file, instances passed between the files are not recognizing the class instances and allowing the methods. Do you have a link to the babel setup solution?
    – user172431
    Commented Oct 23, 2019 at 13:09
  • @user172431 npm install babel-cli babel-core --save-dev. Search [npmjs.com]
    – ColinWa
    Commented Nov 15, 2019 at 10:56
  • 2
    I'm getting two errors. One, SyntaxError: export declarations may only appear at top level of a module Two, ReferenceError: require is not defined Commented Dec 6, 2019 at 4:43
  • @AaronFranke, require above is for Node.js applications, but there is a require.js library file that you can add to your project [npmjs.com/package/require.js] or [npmjs.com/package/require.js].
    – ColinWa
    Commented Dec 7, 2019 at 7:12
9

You can export your methods to access from other files like this:

file1.js

var name = "Jhon";
exports.getName = function() {
  return name;
}

file2.js

var instance = require('./file1.js');
var name = instance.getName();
1
  • 12
    ReferenceError: require is not defined Commented Dec 6, 2019 at 4:44
5

If you are using javascript in HTML, you should include file1.js and file2.js inside your html:

<script src="path_to/file1.js"></script>
<script src="path_to/file2.js"></script>

Note, file1 should come first before file2.

0
4

Make sure the dom is loaded before you run your code in file2... If you're using jQuery:

$(function(){
  var customer=customer();
  var name=customer.getName();
});

Then it doesn't matter what order the files are in, the code won't run until all of the files are loaded.

2

Possible Suggestions to make it work:

Some modifications (U forgot to include a semicolon in the statement this.getName=function(){...} it should be this.getName=function(){...};)

function Customer(){
this.name="Jhon";
this.getName=function(){
return this.name;
};
}

(This might be one of the problem.)

and

Make sure U Link the JS files in the correct order

<script src="file1.js" type="text/javascript"></script>
<script src="file2.js" type="text/javascript"></script>
0
2

It is saying the value is undefined because it is a constructor function, not a class with a constructor. In order to use it, you would need to use Customer() or customer().

First, you need to load file1.js before file2.js, like slebetman said:

<script defer src="file1.js" type="module"></script>
<script defer src="file2.js" type="module"></script>

Then, you could change your file1.js as follows:

export default class Customer(){
    constructor(){
        this.name="Jhon";
        this.getName=function(){
            return this.name;
        };
    }
}

And the file2.js as follows:

import { Customer } from "./file1";
var customer=new Customer();

Please correct me if I am wrong.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.