index.js 嘗試導入錯誤：“./App”不包含默認導出（導入為“App”）

Question

我正在嘗試使用 React 構建我的第一個應用程序以顯示 React 引導程序，但從./src/index.js返回錯誤。

嘗試導入錯誤：“./App”不包含默認導出（作為“App”導入）。

有人可以幫忙嗎？

這是index.js ：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

ReactDOM.render(<App />, document.getElementById('root'));

const Example = (props) => {
    return (
        <Card style={ { width: "18rem" } }>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card
                    title and make up the bulk of
                    the card's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
            </Card.Body>
        </Card>
    );
};

export default Index;

serviceWorker.unregister();

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
    return (
        <Card style={ { width: "18rem" } }>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card
                    title and make up the bulk of
                    the card 's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
            </Card.Body>
        </Card>
    );
}

Answer 1

錯誤消息包含線索'./App' does not contain a default export (imported as 'App')

解決方案是添加一個默認導出：

應用程序.js

export default App;

Answer 2

使用export dafault App； 最后的 App.js 文件

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
    return (
        <Card style={ { width: "18rem" } }>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card
                    title and make up the bulk of
                    the card 's content.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
            </Card.Body>
        </Card>
    );
}
export dafault App;

Answer 3

最后請在您的 App 組件中添加導出

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import "bootstrap/dist/css/bootstrap.min.css";
    import {
      Card
    } from "react-bootstrap";
    import {
      Button
    } from "react-bootstrap";

    function App() {
      return ( <Card style = {
          {
            width: "18rem"
          }
        } >
        <Card.Img variant = "top"
        src = "holder.js/100px180"/>
        <Card.Body >
        <Card.Title > Card Title < /Card.Title> <Card.Text >
        Some quick example text to build on the card title and make up the bulk of
        the card 's content. </Card.Text> <Button variant = "primary" > Go somewhere < /Button> <
      /Card.Body>`` </Card>
      );
    }

   export default App;