Create-React-App failed to compile | Import/First Error

Question

I\'m currently using Create-React-App for my personal site. I keep getting the following errors every time I run it:

./src/~/react-router-dom/es/index.js
 Li         


        

Answer 1

Look closely at your code. I saw this message from a double ; typo.

      import React from 'react';
      import AppBar from '@material-ui/core/AppBar';
      import CircularProgress from '@material-ui/core/CircularProgress';;  <----- Mistake
      import Toolbar from '@material-ui/core/Toolbar';
      import IconButton from '@material-ui/core/IconButton';

Answer 2

This is because you accidentally installed React Router into src folder. So the linter thinks it’s your code and tries to validate it. Don’t install third party dependencies inside src.

Delete src/node_modules and run npm install in the root folder of your app. If some package is missing, run npm install --save <package-name>, also in the root folder.

Answer 3

For me, it was a case, because I was violating Eslint import/first rule, by calling an imported function before any other import.

For example, this code had a problem:

import configureStore from './redux/common/configureStore';
const store = configureStore();

// Add polyfill for fetch for older browsers
import 'isomorphic-fetch';
require('es6-promise').polyfill();

because I was calling and assigning const store = configureStore(); before import 'isomorphic-fetch';

Answer 4

In my case, I got this error for the below piece of code. Before fix:-

import axios from 'axios';
export const GET_TODO = 'GET TODO';
export const SAVE_TODO = 'SAVE TODO';
import { devConstants } from 'src/appConstants';

After spending some time on this, I am able to find cause for this." all import statements should be at the top of the module,"

After fix:-

import axios from 'axios';
import { devConstants } from 'src/appConstants';

export const GET_TODO = 'GET TODO';
export const SAVE_TODO = 'SAVE TODO';

Answer 5

The import declaration is incorrect we need to follow the procedure such

1) first we need to import library

ex: import React from 'react';

2) Then declare any variable or constants

ex: var apiBaseUrl = "http://localhost:4000/api/";

Answer 6

My problem was that I had at the second line this

var moment = require('moment');

All the other lines were imports. When I moved the require to the end, problem fixed.