./ src / 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 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>
  );
}

Answer 1

请最后在您的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;

Answer 2

错误消息保留了线索'./App' does not contain a default export (imported as 'App')

解决方案是添加默认导出：

App.js

export default App;