React项目ESLint报错：TopBarClass在'./TopBar'中未找到(import/named)

The root cause of this error is a mismatch between export and import syntax: your TopBar.js uses a default export for TopBarClass, but your Game.js is trying to import it as a named export (with curly braces). ESLint's import/named rule enforces that named imports must correspond to actual named exports from the module, hence the error.

Here are two straightforward fixes:

Solution 1: Adjust the import in Game.js #

Since TopBarClass is exported as a default export, you need to import it without curly braces. Update your import line in Game.js to:

import React from 'react';
import TopBarClass from './TopBar'; // No curly braces for default imports
export default class Game extends React.Component {
  render() {
    const { state } = this.state;
    return (
      <div id="game-inner-container">
        { TopBarClass({ isMobileOrSmall: state.isMobileOrSmall }) }
      </div>
    );
  }
}

With default exports, you can even rename the component during import if you want (e.g., import MyTopBar from './TopBar';), but keeping the same name works perfectly here.

Solution 2: Adjust the export in TopBar.js #

If you prefer to keep using a named import (with curly braces in Game.js), change the export in TopBar.js to a named export instead of default:

import React from 'react';
export class TopBarClass extends React.Component { // Remove "default" here
}

This way, your existing import line in Game.js (import { TopBarClass } from './TopBar';) will be valid, as it now matches a named export from the module.

Either solution will resolve the ESLint error and let your component work as expected.

内容的提问来源于stack exchange，提问作者Curtis