web-dev-qa-db-ja.com

Create-React-Appがコンパイルに失敗しました|インポート/最初のエラー

現在、個人用サイトでCreate-React-Appを使用しています。実行するたびに次のエラーが発生します。

./src/~/react-router-dom/es/index.js
 Line 3:   Import in body of module; reorder to top  import/first
 Line 5:   Import in body of module; reorder to top  import/first
 Line 7:   Import in body of module; reorder to top  import/first
 Line 9:   Import in body of module; reorder to top  import/first
 Line 11:  Import in body of module; reorder to top  import/first
 Line 13:  Import in body of module; reorder to top  import/first
 Line 15:  Import in body of module; reorder to top  import/first
 Line 17:  Import in body of module; reorder to top  import/first
 Line 19:  Import in body of module; reorder to top  import/first
 Line 21:  Import in body of module; reorder to top  import/first
 Line 23:  Import in body of module; reorder to top  import/first
 Line 25:  Import in body of module; reorder to top  import/first

私は間違いなく何か非常に小さなものを逃しているように感じますが、それを理解するのに苦労しています。エラーキーワード 'import/first'をグーグルで試しましたが、ESLintの問題であると思いました。輸入注文に問題がありましたらお知らせください。さまざまなインポート順序を試しましたが、エラーを取り除けないようです。

import React from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from 'history';
import { Router, Route, Redirect, Switch } from 'react-router-dom';
import './index.css'; 
import App from './App.js';
import Home from './home.js';
import About from './about.js';
import Contact from './contact.js';
import NotFound from './404.js';

import registerServiceWorker from './registerServiceWorker';

const history = createBrowserHistory();

ReactDOM.render(
    <Router history={history}>
        <App>
            <Switch>
                <Route exact path="/" component= {Home} />
                <Route path="/about" component= {About} />
                <Route path="/contact" component= {Contact} />
                <Route path="/404" component= {NotFound} />
                <Redirect to= "/404" />
            </Switch>
        </App>
    </Router>,
    document.getElementById('root')
);
registerServiceWorker();
reactjsimportimporterrorcreate-react-appreact-router-dom
9
Catherine Monroe

これは、誤ってReact Router into src folderをインストールしたためです。そのため、リンターはyourコードを検証しますsrc内にサードパーティの依存関係をインストールしないでください。

src/node_modulesを削除し、アプリのルートフォルダーでnpm installを実行します。不足しているパッケージがある場合は、npm install --save <package-name>、ルートフォルダでもを実行します。

16
Dan Abramov

他のインポートの前にインポートされた関数を呼び出すことにより、Eslint import/first ルールに違反していたため、私にとってはそうでした。

たとえば、次のコードには問題がありました：

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

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

_import 'isomorphic-fetch';_の前にconst store = configureStore();を呼び出して割り当てていたため

7
Shota

インポート宣言は正しくありません。このような手順に従う必要があります。

1）最初にライブラリをインポートする必要があります

例：import React from 'react';

2）次に、変数または定数を宣言します

例：var apiBaseUrl = "http://localhost:4000/api/";

5
KARTHIKEYAN.A

コードをよく見てください。このメッセージをダブルから見ました; 打ち間違え。

      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';
2
str8up7od

私の場合、以下のコードでこのエラーが発生しました。修正前：-

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

これに少し時間を費やした後、私はこの原因を見つけることができます。 "すべてのインポートステートメントモジュールの上部にある必要があります、"

修正後：-

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

export const GET_TODO = 'GET TODO';
export const SAVE_TODO = 'SAVE TODO';
1
Mahesh K

私の問題は、私が2行目にこれを持っていたことでした

var moment = require('moment');

他のすべての行は輸入品でした。要求を最後に移動すると、問題が修正されました。

0
user3417479