Attempted import error: Articles is not exported from component

Failed to compile

./src/App.js
Attempted import error: 'Articles' is not exported from './components/Articles'.

This error occurred during the build time and cannot be dismissed.

export class Articles extends Component {

    static displayName = Articles.name;

    constructor(props) {

        super(props);

        this.state = {

            articles: [],

            loading: true

        };

    }

import React, { Component } from 'react';

import { Route } from 'react-router';

import { Layout } from './components/Layout';

import { Articles } from './components/Articles';

import { Home } from './components/Home';

import { FetchData } from './components/FetchData';

import { Counter } from './components/Counter';

import AuthorizeRoute from './components/api-authorization/AuthorizeRoute';

import ApiAuthorizationRoutes from './components/api-authorization/ApiAuthorizationRoutes';

import { ApplicationPaths } from './components/api-authorization/ApiAuthorizationConstants';

import './custom.css'

export default class App extends Component {

    static displayName = App.name;

    render() {

        return (

            <Layout>

                <Route exact path='/' component={Articles} />

                <Route exact path='/home' component={Home} />

                <Route path='/counter' component={Counter} />

                <AuthorizeRoute path='/fetch-data' component={FetchData} />

                <Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} />

            </Layout>

        );

    }

}

import React, { Component } from 'react';

export class Articles extends Component {

    static displayName = Articles.name;

    constructor(props) {

        super(props);

        this.state = {

            articles: [],

            loading: true

        };

    }

    componentDidMount() {

        this.populateWeatherData();

    }

    static renderTable(articles) {

        return (

            <table className='table table-striped' aria-labelledby="tabelLabel">

                <thead>

                    <tr>

                        <th>title</th>

                    </tr>

                </thead>

                <tbody>

                    {articles.map(article =>

                        <tr key={article.IDArticle}>

                            <td>{article.title}</td>                           

                        </tr>

                    )}

                </tbody>

            </table>

        );

    }

    render() {

        let contents = this.state.loading

            ? <p><em>Loading...</em></p>

            : Articles.renderTable(this.state.articles);

        return (

            <div>

                <h1 id="tableLabel" >Articles</h1>

                <p>This component demonstrates fetching data from the server.</p>

                {contents}

            </div>

        );

    }

    async populateWeatherData() {

        const response = await fetch('weatherforecast');

        const data = await response.json();

        this.setState({ articles: data, loading: false });

    }

}