ESLint：在“./TopBar”中找不到 TopBarClass（导入/命名）

Question

I'm currently building a React app using JSX & I'm getting the following error from ESLint:

ESLint: TopBarClass not found in './TopBar'(import/named)

Here's how the file looks that's producing the error.

import React from 'react';

import { TopBarClass } from './TopBar';

export default class Game extends React.Component {

  render() {
    const { state } = this.state;
    return (
      <div id="game-inner-container">
        { TopBarClass({ isMobileOrSmall: state.isMobileOrSmall }) }
      </div>
    );
  }

}

However inside my TopBar.js I've got the following:

import React from 'react';

export default class TopBarClass extends React.Component {

}

Answer 1

Change

import { TopBarClass } from './TopBar';

To

import TopBarClass from './TopBar';

You are using default export, so you should import it without { / }

Or you could change the export default to only export , then what is inside { / } should match the component's name.

Answer 2

You need to use import in correct way, like as below

import TopBarClass  from './TopBar';

It will work fine.