Search code examples
javascriptclassecmascript-6importreferenceerror

How to fix 'Uncaught ReferenceError: XXX is not defined' when importing a class

I am having trouble importing/exporting classes. It seems so hit and miss. Sometimes it works other times it won't.

I receive the following console error: Uncaught ReferenceError: test is not defined at main.js:

I have uploaded this test online http://tibbotts.epizy.com/testClassImport/index.html

I have tried changing "./test.js" to "/test.js", "./test" etc..

I have tried searching the web for solutions, but all solutions are geared towards the script type="module" ... fix.

<!DOCTYPE html>

<html>

<head>
    <title>Test Class Importing</title>
    <script type="module" src="main.js"></script>
</head>

<body>
    hello this is a test
</body>

</html>

import Test from "./test.js";

test = new Test();

test.speak();

export default class Test{

    constructor(test){
        this._test = `Test is Successful`;
    }

    speak(){
        console.log(this._test);
    }

}

I am expecting this to console log Test is Successful and import the script but am instead getting the following error message: Uncaught ReferenceError: test is not defined at main.js:

Solution

  • You may wish to initialize test with a keyword like var or let :

    let test = new Test();

    Also don't forget that your constructor function expects an argument:

    let test = new Test("something");