VarName is not defined, please fix or add /*global VarName*/ Cloud9


#1

Objective

Stop Cloud9 IDE from giving me the warning message.

Background

I am coding JavaScript using the Cloud9 IDE, and wherever I use a class from another file (in the same folder) I get the warning message:

VarName is not defined, please fix or add /*global VarName*/

Now this bugs me and I want to fix it.

The obvious solution would be to just add the comment /*global VarName*/ and be done with it, but I don’t believe this is a good practice.

What I tried

After researching, I came across the JavaScript import functionality. In theory, this would allow me to do something like import "myOtherJsFile" and be done with it.

This would be a good standardized solution for the problem, as many other languages take the same approach.

Problem

However, even after adding the said line, I still get the warning. It wont go away.

Questions

  1. Am I doing something wrong?
  2. Is there a way to remove the warning without adding comments to my code?
  3. Is there another way of achieving my objective?

#2

The C9 IDE has a third party javascript test thingy (not sure…), which checks if your code in one file is correct.
However, you variables or functions from another file do not get linked, so for File 1, which would call a var from File 2 would get checked and would not find that variable, so it gives you the warning.

The given /* global vaname */ just says to the checker, that it is defined. You were to place that in File 1.


#3

you can create .eslintrc file and configure eslint by listing global variables like this

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

http://eslint.org/docs/user-guide/configuring

or you can turn off “mark undefined variables” option from project settings.

something like import "myOtherJsFile" and be done with it.

that’s not how import in js works, you need to specify the name of imported variable.


#4

I am aware of that mechanism, my question however focuses on the fact that I find it cumbersome in the first place :S


#5

That is how import works. You can check the link I provide in my questions for additional examples. Specifying the variable is merely optional.


#6

It says:

Import an entire module for side effects only, without importing any bindings.

import "my-module";

this means after running import "myOtherJsFile"; variables exported from it, still won’t be visible in the first file.


#7

You appear to be correct !

I have tried using import {PrivateNameSpace} from "PrivateNameSpace"; at the top of the file (right after "use strict";), however Cloud9 tells me that import is not defined. Is this feature supported ?


#8

however Cloud9 tells me that import is not defined

where does it tell you this, in the gutter? I cannot reproduce the issue, in which workspace did you see it?


#9

It gives me this message when I am running my index.js file. Perhaps I am doing something wrong. Here is a simple example:

file1.js

class ClassA{
    
    constructor(aMessage){
        this.message = aMessage;
    }
    
    addBanana(){
        return this.message + " banana!";
    }
}

file2.js

"use strict";

import {ClassA} from "file1.js" //error, import is not defined

var test = ClassA("I would like a ");

Also, thank you for the help!


#10

The warning may mean that ClassA is not exported from file1.js, perhaps it should be changed to export class ClassA{...
Are you running the index.js file with node or something else? With node using require may be better.


#11

I am using a standard HTML5 project. No matter what I do, keywords like import and export do not seem to be recognized:

file1.js:

export class ClassA{
    
    constructor(aMessage){
        this.message = aMessage;
    }
}

file2.js:

"use strict";

import {ClassA} from "file1" //error, import is not defined

var test = new ClassA("I would like a banana");

I consulted the following article:


#12

I am using a standard HTML5 project

there are many ways to use standard html5 workspace type:)

If you run your code in the browser and do not use babel or something like it, the error must be because no browser supports js modules yet (see compatibility tables on mdn)


#13

By the coding Gods, you are correct. According to MDN this feature is not yet supported anywhere: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import

I am surprised, never occurred to me that could be the problem.

So, my only option is to create an .eslintrc file with all the information about my global variables, correct?

My project is a simple HTML Hello World project, which I am using to test these features. There is absolutely nothing special to it :smiley:


#14

So, my only option is to create an .eslintrc file with all the information about my global variables, correct?

yes, either that or you can turn off “mark undefined variables” option from project settings Javascript missing semicolon/‘a’ is undefined; please fix or add

Though I’d say the best option is to use /*global */ comments, since in the future it will make it easier to switch to import or require


#15

Alright, thanks for your responses and tenacity ! I will now updated my stackoverflow thread with this information and will take into consideration what I learned from here.

I really wish to point out your tenacity in this matter. Most people would have given up on helping after 2 days, but you kept reading my replies. Thank you!

EDIT

I added a resume of the whole discussion in my StackOverflow answer. You can check it here: