React import部分のエラー

Question

ビルドはうまくいくのですが、VisualStudioCode上でエラーが発生しているようです。
もし、解消方法を知っておりましたらご教示下さい。

import { Header } from '@/components/header';
import { UserInfo } from '@containers/user-info';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
import { IData } from '@models/data';
import { IStore } from '@models/store';
import { IUi } from '@models/ui';
import { getUserInfo } from '@store/actions/data';
import { togglePopup } from '@store/actions/ui';
import hash from 'object-hash';
import React from 'react';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { compose } from 'redux';

class LayoutClass extends React.PureComponent<Props> {
  constructor(props) {
    super(props);
  }

  public componentDidMount() {
    const { getUserInfo } = this.props;
    getUserInfo();
  }

  public render(): JSX.Element {
    return (
      <>
        <Header />
        <div style={{ paddingTop: '60px' }}>
          {this.renderRestLongDiv()}
          <Switch>
            <Route exact path='/user-info' component={UserInfo} />
          </Switch>
        </div>
      </>
    );
  }

  // TODO Remove after testing
  protected renderRestLongDiv(): JSX.Element {
    const retDiv: JSX.Element[] = [];
    for (let i = 0; i < 100; i++) {
      retDiv.push(<div key={hash(i)}>LINE: {i}</div>);
    }
    return <div>{retDiv}</div>;
  }

  protected renderDialog(): JSX.Element {
    const {
      ui: { openPopup },
      togglePopup,
    } = this.props;
    return (
      <Dialog fullWidth open={openPopup} onClose={() => togglePopup(false)}>
        <DialogTitle>SampleDialog</DialogTitle>
        <DialogContent>Sample Dialog Content</DialogContent>
        <DialogActions>
          <Button onClick={() => togglePopup(false)}>Close</Button>
        </DialogActions>
      </Dialog>
    );
  }
}

export type Props = IStateProps & IDispatchProps;

export interface IStateProps {
  data: IData;
  ui: IUi;
}

export interface IDispatchProps {
  togglePopup: (flag: boolean) => void;
  getUserInfo: () => void;
}

const mapStateToProps = (state: IStore): Partial<IStateProps> => ({
  data: state.data,
  ui: state.ui,
});

const mapDispatchToProps: IDispatchProps = {
  togglePopup,
  getUserInfo,
};

export const Layout = compose(connect(mapStateToProps, mapDispatchToProps))(LayoutClass);

import部分に以下のようなエラーがでるのが気になります

解消方法がわからず質問に来た次第です。

Comments

[hoshi-takanori]

@/components/〜 とか @models/〜 とかって自作のモジュールですか？

[riesa]

そのとおりです