前提・実現したいこと
ここに質問の内容を詳しく書いてください。
React+TypeScriptのアプリをcreat-react-appを使わないで作っています。
環境構築を実装し、下記コードを実行して起動しようとした時に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
terminal
1$ ./node_modules/.bin/webpack-dev-server
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 index.tsx Module not found: Error: Can't resolve 'index.tsx' in '/Applications/MAMP/htdocs/dcproject0001/clinet' @ multi (webpack)-dev-server/client?http://localhost:8080 index.tsx main[1]
該当のソースコード
webpack.config.js
javascript
1 2module.exports = { 3 mode: 'development', 4 entry: 'index.tsx', 5 module: { 6 rules: [ 7 { 8 test: /.tsx$/, 9 use: 'ts-loader', 10 }, 11 ], 12 }, 13 resolve: { 14 extensions: [ 15 '.ts', '.js', '.tsx', '.jsx' 16 ], 17 } 18};
package.json
json
1{ 2 "name": "clinet", 3 "version": "1.0.0", 4 "main": "index.js", 5 "license": "MIT", 6 7 "dependencies": { 8 "@babel/core": "^7.12.10", 9 "@babel/preset-env": "^7.12.10", 10 "@babel/preset-react": "^7.12.10", 11 "@babel/preset-typescript": "^7.12.7", 12 "@types/react": "^17.0.0", 13 "@types/react-dom": "^17.0.0", 14 "babel-loader": "^8.2.2", 15 "react": "^17.0.1", 16 "react-dom": "^17.0.1", 17 "ts-loader": "^8.0.11", 18 "typescript": "^4.1.2", 19 "webpack": "4.19.1", 20 "webpack-cli": "3.1.0", 21 "webpack-dev-server": "3.1.8" 22 }, 23 "devDependencies": { 24 "@webpack-cli/serve": "^1.1.0" 25 } 26}
src/index.tsx
xml
1import React from 'react'; 2import { render } from 'react-dom' 3 4render( 5 <h1>React x TypeScript!</h1>, 6 document.getElementById('root') 7)
.babelrc
json
1{ 2 "presets": [ 3 "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript" 4 ] 5}
試したこと
・webpack関連のパッケージをバージョンを指定して再起動してみた。
"devDependencies": { "webpack": "^4.19.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.8" }
・webpack.config.jsのentryの指定の仕方を変えてみた。
entry:'src/index.tsx'→entry:'/src/index.tsx'→entry:'./src/index.tsx'
・webpack-dev-serverをwebpack-serverに変えてみた。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
この手順で環境構築をしました。
https://tech.playground.style/javascript/babel-webpack-build/
あなたの回答
tips
プレビュー