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

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

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

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

0回答

602閲覧

React+TypeScriptでの環境構築でエラー

hiroto-

総合スコア4

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2020/12/10 05:50

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
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/

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

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

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

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

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

A_kirisaki

2020/12/13 12:14

entry:'./src/index.tsx' に変えたときのエラーはどうなりましたか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問