Q&A
つい最近Reactを学び始めました。
最近は静的型付け言語がホットだとのことで、TypeScriptに手を出したのですが、どハマリしてしまいました。
こちらにいらっしゃる有識者の皆様にぜひともお力を借りたいと思い、こうして投稿させていただいた次第です。
前提・実現したいこと
React + TypeScriptでの開発を目論んでいるのですが、TypeScriptを使っている場合にのみcomponents配下のファイルが読み出せません。
発生している問題・エラーメッセージ
/home/Username/javascript/component-test2/src/App.tsx TypeScript error in /home/Username/javascript/component-test2/src/App.tsx(5,18): Cannot find module 'components/Home'. TS2307 3 | import './App.css'; 4 | > 5 | import Home from 'components/Home' | ^ 6 | 7 | function App() { 8 | return (
該当のソースコード
APPtsx
1import React from 'react'; 2import logo from './logo.svg'; 3import './App.css'; 4 5import Home from 'components/Home' 6 7function App() { 8 return ( 9 <div className="App"> 10 <header className="App-header"> 11 <img src={logo} className="App-logo" alt="logo" /> 12 <p> 13 Edit <code>src/App.tsx</code> and save to reload. 14 </p> 15 <a 16 className="App-link" 17 href="https://reactjs.org" 18 target="_blank" 19 rel="noopener noreferrer" 20 > 21 Learn React 22 </a> 23 </header> 24 </div> 25 ); 26} 27 28export default App;
hometsx
1import React from "react" 2 3const Home = () => {}; 4 5export default Home; 6
create-react-app hogehoge --template typescript で生成されるコードにimport文を追加したのみ。
home.tsxにかかれているのは、何か書かないと怒られるためためです。
試したこと
./components/Home src/components/Home 等フォルダの階層や開始地点を設定？する記述方法にしても改善せず、アロー関数を使った書き換えを試すも効果なし。
create-react-appをやり直しても同じ状況から抜け出すには至りませんでした。
調べてみるとTyoeScript特有のエラーもあるような記述が散見されましたので、create-react-app hogehoge のみーすなわち、TypeScriptを使わずJavaScriptのみを使って見たところ、その際には問題が発生しないことがわかりました。
以下jsのときのコードです。
import React, { Component } from "react"; import logo from './logo.svg'; import './App.css'; import Home from "components/Home"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;
見ての通り、create^react-appで作成したものにファイルを読み込んでいるのみです。
補足情報（FW/ツールのバージョンなど）
以下にpakeage.jsonを記載させていただきます。
・TypeScript使用
{ "name": "component-test2", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@types/react-router-dom": "^5.1.3", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "typescript": "~3.7.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
・TypeScript不使用
{ "name": "component-test", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
何かパッケージの更新など重要な見落としがあるのでしょうか。
有識者の皆様にはぜひともお力添えをいただきたく、お願い申し上げます。
何卒よろしくお願いいたします。
4/9 0305 追記：
試したことのpathの指定を明瞭に修正しました。
回答1件
0
ベストアンサー
importする際に
import Home from 'components/Home'
ではなく次のような書き方に変えましょう。
import Home from './components/Home'
投稿2020/04/08 17:59
総合スコア299
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/08 18:03
2020/04/08 18:06 編集
2020/04/08 18:09 編集
2020/04/08 18:13
2020/04/08 18:14
2020/04/08 18:16 編集
2020/04/08 18:18
2020/04/08 18:20
2020/04/08 18:21
2020/04/08 18:22
2020/04/08 18:24
2020/04/08 18:25
2020/04/08 18:27