JSX does not mark React as used when imported via import React = require("react");

[cezary-biernacki]

I have react option enabled for "no-unused-variable"

 "no-unused-variable": [true, "react"],

Still React is reported as unused when imported like this:

 import React = require("react);

but this import statement works

 import * as React from "react";    

Example

/// <reference path="typings.d.ts" />
import React = require("react"); // TSLint reports "unused variable: 'React'"
const result: JSX.Element = <div>Test</div>;
export = result;

It seems that the problem is caused by react-specific import detection code is only in visitNamespaceImport() method (noUnusedVariableRule.ts file), but not in visitImportEqualsDeclaration() method.

[jkillian]

Good catch @cezary-biernacki, thanks! Is using import * as React from "react"; an acceptable workaround for you until this gets fixed?

[myitcv]

@cezary-biernacki @jkillian - according to the spec the two are equivalent. So whilst the rule should be fixed for completeness, @cezary-biernacki you should be safe to use the import variation instead of the require(..) variation.

[cezary-biernacki]

@jkillian: Yes, the workaround is acceptable, just it is confusing. I had to debug TSLint itself to discover what kind of syntax works, as the documentation does not provide necessary details.

[andersekdahl]

Another variant of this: TSLint does not mark React as used if you import it like this:
import React from 'react'
The d.ts file from DefinitelyTyped does not contain a default export, but it's perfectly fine to import React like that if you use Babel (since Babel has interop between ES6 modules and CJS modules).

EDIT: I ended up using this: https://www.npmjs.com/package/babel-plugin-react-require which automatically injects an import of React for stateless components.

[adidahiya]

Babel has interop between ES6 modules and CJS modules

well it's a bit more than that; Babel automatically creates synthetic default exports. but I agree that the import React from 'react' syntax should also be supported along with import React = require("react"). as indicated by the labels, this is an easy fix that anyone is welcome to contribute.

[FlorianTopf]

There is another issue related to the original problem #689 and it affects imports in jest unit-test cases. The linter also doesn't mark react as used when calling TestUtils.renderIntoDocument. I am using tslint 3.8.1.

import * as React from 'react'; // creates error
import * as ReactDOM from 'react-dom';
import * as TestUtils from 'react-addons-test-utils';

describe('Input', () => {
    it('just an input test', () => {
        // this statement should be detected as usage of the react import
        const input = TestUtils.renderIntoDocument(<input type = 'text'/>); 
        const inputNode: Element = ReactDOM.findDOMNode(input);
        inputNode.setAttribute('value', 'test');
        expect(input.getAttribute('value')).toEqual('test');
    });
});

[marcusradell]

We are porting from eslint + babel and have the following use case:

• We do all imports in index.js files.
• We dependency inject all imports into the other files as named object keys.

So in our render.js file we will have the following snippet:

export default function create({
  React,
  StyleSheet,
  css,
  styles
}) {
// snip with tsx stuff
}

But setting "no-unused-variable": [true, "react"] is not working.

This means that we will never have an import/require in our tsx files.

[adidahiya]

at this point I would recommend switching to the compiler options and disabling no-unused-variable, see #1481 and linked threads.

[andy-hanson]

Should be fixed by #2235, which uses TypeScript's implementation for no-unused-variable.