React error: Import in body of module; reorder to top

I have to manually move one line of code after every compilation.

// Generated by CoffeeScript 2.0.3
var App, code, div, fix, h1, header, img, p;

import React, {
  Component
} from 'react';

import logo from './logo.svg';

import './App.css';

must be changed to

// Generated by CoffeeScript 2.0.3
import React, {
  Component
} from 'react';

import logo from './logo.svg';

import './App.css';

var App, code, div, fix, h1, header, img, p;

to avoid this error message from React:

capture

App.txt

4 thoughts on “React error: Import in body of module; reorder to top

  1. Hi!

    The messages in your screen shot are not from React. They are from eslint-plugin-import, specifically the import/first rule.

    Both pieces of code are actually equivalent! If you run them, you’ll see that both work exactly the same. However, your tooling seems to prevent you from running if the import/first rule is not satisfied. It does not make much sense to run ESLint on the compiled JS from a CoffeeScript program, so I’d recommend not doing that.

  2. Really hard to tell eslint to stop checking this.
    This is the only way I could make it work:

    ###
    eslint-disable 
    ###
    

    I tried
    # eslint-disable
    but that does not work.

  3. I recently got this problem too.
    Import statements must ahead of declaration statements.
    This line code below should not in there .
    var App, code, div, fix, h1, header, img, p;