Q&A
> エラー表示が出て
そのエラーを質問文に書かないのは何で？
サイトを参考にしながら、React×Typscriptで、プロフィールサイトを作成しています。
コンポーネント化をしたく、Skills．tsx内からTechnic．tsxを作成し、ソースコードを作成しました。
色々調べて実装したのですが、エラー表示が出て、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。
- 期待する動作
① Skills.tsx内の『<Box display='flex' justifyContent='center' p={1} >』以下をコンポーネント化したい。
② エラー表示を消したい。
- 実際のコードとエラーが出ている箇所
コンパイルした際のエラー表示文
Failed to compile
./src/App.tsx
Module not found: Can't resolve './components/Technic' in '/Users/kitoumasaomi/Desktop/front_end_one/src'
※下記のソースコードは引用テキストを雛形として参考にし、装飾等はサイトを検索して、カスタムをしています。
https://qiita.com/kazama1209/items/868c09393007cc9b234f#%E3%82%B9%E3%82%AD%E3%83%AB%E4%B8%80%E8%A6%A7skills%E3%82%92%E4%BD%9C%E6%88%90
Apptsx
1import React from 'react'; 2import Navbar from './components/Navbar'; 3import MyAvatar from './components/MyAvatar'; 4import About from './components/About'; 5import Skills from './components/Skills'; 6import Technic from './components/Technic'; 7※エラー文'./components/Technic' またはそれに対応する型宣言が見つかりません。 8 9const App: React.FC = () => { 10 return ( 11 <> 12 <section> 13 <Navbar/> 14 </section> 15 <section> 16 <MyAvatar /> 17 </section> 18 <section id='about'> 19 <About /> 20 </section> 21 <section id='skills'> 22 <Skills /> 23 </section> 24 <section id='Technic'> 25 <Technic /> 26 </section> 27 </> 28 ); 29} 30 31export default App;
Skillstsx
1import React from "react"; 2import Box from '@material-ui/core/Box'; 3import { makeStyles } from "@material-ui/core/styles"; 4// import Card from '@material-ui/core/Card'; 5// import CardContent from "@material-ui/core/CardContent"; 6import Typography from "@material-ui/core/Typography"; 7import './Skills.module.scss'; 8 9const useStyles = makeStyles({ 10 root: { 11 width: 730, 12 maxWidth: '100%', 13 }, 14}); 15 16const Skills: React.FC = () => { 17 18 const classes = useStyles(); 19 20 return ( 21 <> 22 <Box p={2}> 23 <Box display='flex' justifyContent='center' p={1} > 24 <Typography variant='h5' > 25 Skills 26 </Typography> 27 </Box> 28 29 30※ コンポーネント化（Technic.tsx)したい箇所 31 {/* <Box display='flex' justifyContent='center' p={1} > 32 <Card className={classes.root}> 33 <CardContent> 34 <Typography variant="h6"> 35 Programming language 36 </Typography> 37 <Typography color="textSecondary"> 38 Ruby / JavaScript / TypeScript 39 </Typography> 40 </CardContent> 41 </Card> 42 </Box> 43 <Box display='flex' justifyContent='center' p={1} > 44 <Card className={classes.root}> 45 <CardContent> 46 <Typography variant="h6"> 47 Framework 48 </Typography> 49 <Typography color="textSecondary"> 50 Ruby on Rails / React 51 </Typography> 52 </CardContent> 53 </Card> 54 </Box> 55 <Box display='flex' justifyContent='center' p={1} > 56 <Card className={classes.root}> 57 <CardContent> 58 <Typography variant="h6"> 59 Database 60 </Typography> 61 <Typography color="textSecondary"> 62 MySQL / PostgreSQL 63 </Typography> 64 </CardContent> 65 </Card> 66 </Box> 67 <Box display='flex' justifyContent='center' p={1} > 68 <Card className={classes.root}> 69 <CardContent> 70 <Typography variant="h6"> 71 AWS 72 </Typography> 73 <Typography color="textSecondary"> 74 EC2 / ECS / ECR / Lambda / SQS / SNS / Elastic Beanstalk / S3 / Cloud9 / CloudWatch / CloudFormation / RDS / Route53 75 </Typography> 76 </CardContent> 77 </Card> 78 </Box> */} 79※ コンポーネント化（Tecnic.tsx)したい箇所（ここまで） 80 81 </Box> 82 </> 83 ); 84} 85 86export default Skills;
Technictsx
1※ コンポーネント化（Tecnic.tsx)したファイル 2 3import React from "react"; 4import Box from '@material-ui/core/Box'; 5import { makeStyles } from "@material-ui/core/styles"; 6import Card from '@material-ui/core/Card'; 7import CardContent from "@material-ui/core/CardContent"; 8import Typography from "@material-ui/core/Typography"; 9 10const useStyles = makeStyles({ 11 root: { 12 width: 730, 13 maxWidth: '100%', 14 }, 15 }); 16 17 const Technic: React.FC = () => { 18 ※エラー文 ： 'Technic' が宣言されていますが、その値が読み取られることはありません。 19 const classes = useStyles(); 20 21 return ( 22 <> 23 <Box p={2}> 24< Box display='flex' justifyContent='center' p={1} > 25 <Card className={classes.root}> 26 <CardContent> 27 <Typography variant="h6"> 28 Programming language 29 </Typography> 30 <Typography color="textSecondary"> 31 Ruby / JavaScript / TypeScript 32 </Typography> 33 </CardContent> 34 </Card> 35 </Box> 36 <Box display='flex' justifyContent='center' p={1} > 37 <Card className={classes.root}> 38 <CardContent> 39 <Typography variant="h6"> 40 Framework 41 </Typography> 42 <Typography color="textSecondary"> 43 Ruby on Rails / React 44 </Typography> 45 </CardContent> 46 </Card> 47 </Box> 48 <Box display='flex' justifyContent='center' p={1} > 49 <Card className={classes.root}> 50 <CardContent> 51 <Typography variant="h6"> 52 Database 53 </Typography> 54 <Typography color="textSecondary"> 55 MySQL / PostgreSQL 56 </Typography> 57 </CardContent> 58 </Card> 59 </Box> 60 <Box display='flex' justifyContent='center' p={1} > 61 <Card className={classes.root}> 62 <CardContent> 63 <Typography variant="h6"> 64 AWS 65 </Typography> 66 <Typography color="textSecondary"> 67 EC2 / ECS / ECR / Lambda / SQS / SNS / Elastic Beanstalk / S3 / Cloud9 / CloudWatch / CloudFormation / RDS / Route53 68 </Typography> 69 </CardContent> 70 </Card> 71 </Box> 72 </Box> 73 74 </> 75 ); 76} 77 78export default Box;
回答1件
0
ベストアンサー
ちょっとやりたいことがよくわかっていないのですが、Technic.tsxがTecnic.tsxになっているように見えます。
もしコードも同じtypoをしているなら直してみてください。
追記
編集後の質問みました。やはりModule not foundというエラーが出ているので、typoしている可能性が高いです。もしくはファイルを間違えてcomponents/以外においてしまったとか。
'Technic' が宣言されていますが、その値が読み取られることはありませんというエラーですが、そもそもこれはエラーじゃなくてWarningです。おそらくVScode自体に表示されていると思います。
これはtechnic.tsxでexportしているのがTechnicコンポーネントじゃなくてmaterialUIのBoxコンポーネントだからです。
私はコンポーネントの宣言とexportを同時にやりたいので
js
1export default function Technic(){ 2 return '...' 3}
と書く方が好みですね。（そもそもdefault exportはimport側で勝手に名前を変更できるのでただのexportを使った方がいいという話はあります。）
投稿2021/06/30 07:01
編集2021/07/01 03:48
総合スコア69
ararkさん、ご指摘ありがとうございます！
『Tecnic.tsx ⇨ Tecnic.tsx』へteratailの質問の文章は訂正しました。
※自身の環境の方は単語が間違っていなかったです。
わかりました。
ちょっと質問が見づらいので、
1. 期待する動作
2. 実際のコード
3. 出たエラー全て（おそらくcreate react appを使っているとおもうので、コマンドラインに出てきたエラー全て）
のように書いてみてください
ararkさん、ご指摘ありがとうございます！
質問の仕方も、編集してみました。
あなたの回答
tips
プレビュー
