質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

864閲覧

React import部分のエラー

riesa

総合スコア9

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/06/22 07:24

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

tsx

1import { Header } from '@/components/header'; 2import { UserInfo } from '@containers/user-info'; 3import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core'; 4import { IData } from '@models/data'; 5import { IStore } from '@models/store'; 6import { IUi } from '@models/ui'; 7import { getUserInfo } from '@store/actions/data'; 8import { togglePopup } from '@store/actions/ui'; 9import hash from 'object-hash'; 10import React from 'react'; 11import { connect } from 'react-redux'; 12import { Route, Switch } from 'react-router-dom'; 13import { compose } from 'redux'; 14 15class LayoutClass extends React.PureComponent<Props> { 16 constructor(props) { 17 super(props); 18 } 19 20 public componentDidMount() { 21 const { getUserInfo } = this.props; 22 getUserInfo(); 23 } 24 25 public render(): JSX.Element { 26 return ( 27 <> 28 <Header /> 29 <div style={{ paddingTop: '60px' }}> 30 {this.renderRestLongDiv()} 31 <Switch> 32 <Route exact path='/user-info' component={UserInfo} /> 33 </Switch> 34 </div> 35 </> 36 ); 37 } 38 39 // TODO Remove after testing 40 protected renderRestLongDiv(): JSX.Element { 41 const retDiv: JSX.Element[] = []; 42 for (let i = 0; i < 100; i++) { 43 retDiv.push(<div key={hash(i)}>LINE: {i}</div>); 44 } 45 return <div>{retDiv}</div>; 46 } 47 48 protected renderDialog(): JSX.Element { 49 const { 50 ui: { openPopup }, 51 togglePopup, 52 } = this.props; 53 return ( 54 <Dialog fullWidth open={openPopup} onClose={() => togglePopup(false)}> 55 <DialogTitle>SampleDialog</DialogTitle> 56 <DialogContent>Sample Dialog Content</DialogContent> 57 <DialogActions> 58 <Button onClick={() => togglePopup(false)}>Close</Button> 59 </DialogActions> 60 </Dialog> 61 ); 62 } 63} 64 65export type Props = IStateProps & IDispatchProps; 66 67export interface IStateProps { 68 data: IData; 69 ui: IUi; 70} 71 72export interface IDispatchProps { 73 togglePopup: (flag: boolean) => void; 74 getUserInfo: () => void; 75} 76 77const mapStateToProps = (state: IStore): Partial<IStateProps> => ({ 78 data: state.data, 79 ui: state.ui, 80}); 81 82const mapDispatchToProps: IDispatchProps = { 83 togglePopup, 84 getUserInfo, 85}; 86 87export const Layout = compose(connect(mapStateToProps, mapDispatchToProps))(LayoutClass); 88

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

イメージ説明
解消方法がわからず質問に来た次第です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/06/22 20:55

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

2021/06/23 05:56

そのとおりです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問