Create-react-app: Configure or disable Eslint Rule "Import/First" - blocks me from compiling

[Crowdedlight]

I get this error in my console every time I try to run the react-app.

    ./src/RadioGroup.jsx
      Line 10:  Import in body of module; reorder to top  import/first
      Line 11:  Import in body of module; reorder to top  import/first
      Line 12:  Import in body of module; reorder to top  import/first

The issue is that compiling this RadioGroup.tsx:

import * as React from "react";
import { Component } from "react";
import Button from 'react-bootstrap/lib/Button'
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'

/**
 * A ButtonGroup whose buttons act like a radio button.
 * Options should be passed as a list of [value, display] tuples.
 * Buttons are set up so you can use e.target.name and e.target.value in your
 * onChange handler like you would with regular form inputs.
 */
class RadioGroup extends Component<any, any> {
    render() {
        let { disabled, name, onChange, options, value, ...props } = this.props
        return <ButtonGroup {...props}>
            {options.map(option =>
                <Button
                    key={option[0]}
                    bsStyle={option[0] === value ? 'primary' : 'default'}
                    children={option[1]}
                    disabled={disabled}
                    name={name}
                    onClick={onChange}
                    value={option[0]}
                />
            )}
        </ButtonGroup>
    }
})

export default RadioGroup

Gives this .jsx output:

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
import * as React from "react";
import { Component } from "react";
import Button from 'react-bootstrap/lib/Button';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
/**
 * A ButtonGroup whose buttons act like a radio button.
 * Options should be passed as a list of [value, display] tuples.
 * Buttons are set up so you can use e.target.name and e.target.value in your
 * onChange handler like you would with regular form inputs.
 */
class RadioGroup extends Component {
    render() {
        let _a = this.props, { disabled, name, onChange, options, value } = _a, props = __rest(_a, ["disabled", "name", "onChange", "options", "value"]);
        return <ButtonGroup {...props}>
            {options.map(option => <Button key={option[0]} bsStyle={option[0] === value ? 'primary' : 'default'} children={option[1]} disabled={disabled} name={name} onClick={onChange} value={option[0]}/>)}
        </ButtonGroup>;
    }
}
export default RadioGroup;

Issue being that it seems like let _a = this.props, { disabled, name, onChange, options, value } = _a, props = __rest(_a, ["disabled", "name", "onChange", "options", "value"]); automatically places some code in top of the file. Which gives me the "Import/first" error which in turn means I can't compile.

I have tried adding eslint settings to ignore the rule/file in my package.json, but doesn't seem to have any effect.

Any idea what I can do to either disable this rule or somehow fix this?
Manually I can just copy the import statements to the top of the jsx file, but this isn't practically if I have to do that every time I compile. ;-)

npm -v 3.8.6
node -v 6.0.0
npm ls react-scripts -- [email protected]
Win10
Chrome, but error is also showing in cmd.

I searched though the issues and google but didn't get further in finding any solutions after a couple of hours.

[Timer]

I'd file a bug with typescript and ask that they make imports always be at the top.

That said, you should be able to add a comment to the file:
//eslint-disable import/first

[gaearon]

I don’t think we’ll be changing the lint rules to accommodate compile-to-JS languages. There are too many edge cases like this. I hope the workaround @Timer suggested is reasonable in the meantime, and maybe we’ll support TypeScript more directly in the future.

[Crowdedlight]

Thanks for the quick reply and suggestion. :)
I'll use //eslint-disable import/first instead.

[arunvelsriram]

Thanks. Only block comment seems to work for me.

/* eslint-disable import/first */

.....

[ArcticZeroo]

That eslint disable line is pretty ridiculous, with strict linting being forced in 2.0 I can't run at all because the typescript compiler is ordering imports incorrectly in _every single file_. Am I really supposed to disable the rule in EVERY file??

[Timer]

We now support TypeScript so this isn't an issue anymore.