Imported symbols are erroneously detected undefined when using JSX

[n1k0]

import App from "./components/App";

React.render(<App />, document.querySelector("#app"));

Gives:

26:14  error  'App' is not defined  no-undef

Also,

import App from "./components/App";

React.render(App(), document.querySelector("#app"));

makes it going away, so it's a JSX-related thingy.

[gaearon]

+1

[nzakas]

This is because ESLint doesn't yet support modules in our rules. See eslint/eslint#1903

[kentcdodds]

@nzakas, has that changed in the last 13 days? Currently on the website there's the ecmaFeatures.modules option, so that's why I ask. But I'm still experiencing this issue. Current workaround was to use const foo = require('./foo'); because I'm using webpack and it's cool like that, but would love to just use pure ES6 modues.

Note: I'm not using JSX

[nzakas]

Yup. We now support modules. I'd recommend either subscribing to the mailing list or following geteslint on Twitter for updates.

[kentcdodds]

I'm following on Twitter. Do you know why I would bet getting this error:

import foo from 'foo';

foo.bar();

Results in:

error  'foo' is not defined  no-undef

I npm installed a commit from yesterday.

[nzakas]

If you think it's an error in ESLint (without babel-eslint), then please look at the issues over on the ESLint repo.

[sebmck]

Can you please verify that this issue still exists on 3.0.1?

[sebmck]

Not sure I can do anything about this. I'd recommend using the eslint-plugin-react rules.