Configure or disable Eslint Rule "Import/First" - blocks me from compiling

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 – react-scripts@1.0.10 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.

[arunvelsriram]

Thanks. Only block comment seems to work for me.

/* eslint-disable import/first */

.....

[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