Q&A概要
jsで記述したサンプル程度のReactを利用したコードをTypeScriptに移行しようと思い、コードを書いていたのですが、
tscコマンドを叩いた所エラーが出力されます。
環境は、下にpackage.jsonを記載しております。
tscのバージョンは、2.6.2です。
エラーログ
error
1> tsc [18-09-25 23:44] 2node_modules/@types/prop-types/index.d.ts(10,38): error TS1005: '=' expected. 3node_modules/@types/prop-types/index.d.ts(12,46): error TS1005: ';' expected. 4node_modules/@types/prop-types/index.d.ts(12,75): error TS1005: ';' expected. 5node_modules/@types/prop-types/index.d.ts(12,99): error TS1005: ';' expected. 6node_modules/@types/prop-types/index.d.ts(14,54): error TS1005: ';' expected. 7node_modules/@types/prop-types/index.d.ts(14,78): error TS1005: ';' expected. 8node_modules/@types/prop-types/index.d.ts(14,81): error TS1109: Expression expected. 9node_modules/@types/prop-types/index.d.ts(14,97): error TS1109: Expression expected. 10node_modules/@types/prop-types/index.d.ts(14,122): error TS1005: ';' expected. 11node_modules/@types/prop-types/index.d.ts(14,130): error TS1128: Declaration or statement expected. 12node_modules/@types/prop-types/index.d.ts(14,138): error TS1005: ',' expected. 13node_modules/@types/prop-types/index.d.ts(27,48): error TS1005: ';' expected. 14node_modules/@types/prop-types/index.d.ts(27,49): error TS1109: Expression expected. 15node_modules/@types/prop-types/index.d.ts(27,50): error TS1109: Expression expected. 16node_modules/@types/prop-types/index.d.ts(27,68): error TS1005: '(' expected. 17node_modules/@types/prop-types/index.d.ts(27,69): error TS1005: ')' expected. 18node_modules/@types/prop-types/index.d.ts(29,30): error TS1005: ';' expected. 19node_modules/@types/prop-types/index.d.ts(29,54): error TS1005: ';' expected. 20node_modules/@types/prop-types/index.d.ts(29,57): error TS1109: Expression expected. 21node_modules/@types/react/index.d.ts(2295,27): error TS1005: ';' expected. 22node_modules/@types/react/index.d.ts(2296,14): error TS1005: ':' expected. 23node_modules/@types/react/index.d.ts(2296,28): error TS1005: ';' expected. 24node_modules/@types/react/index.d.ts(2297,9): error TS1109: Expression expected. 25node_modules/@types/react/index.d.ts(2298,9): error TS1005: '(' expected. 26node_modules/@types/react/index.d.ts(2299,9): error TS1005: '(' expected. 27node_modules/@types/react/index.d.ts(2300,5): error TS1005: '(' expected. 28node_modules/@types/react/index.d.ts(2300,12): error TS1005: ')' expected. 29node_modules/@types/react/index.d.ts(2312,49): error TS1005: ';' expected. 30node_modules/@types/react/index.d.ts(2312,76): error TS1005: ';' expected. 31node_modules/@types/react/index.d.ts(2312,99): error TS1005: ';' expected. 32node_modules/@types/react/index.d.ts(2313,13): error TS1128: Declaration or statement expected. 33node_modules/@types/react/index.d.ts(2314,13): error TS1005: '(' expected. 34node_modules/@types/react/index.d.ts(2314,17): error TS1005: ',' expected. 35node_modules/@types/react/index.d.ts(2314,44): error TS1005: ',' expected. 36node_modules/@types/react/index.d.ts(2314,45): error TS1005: ':' expected. 37node_modules/@types/react/index.d.ts(2316,17): error TS1005: '(' expected. 38node_modules/@types/react/index.d.ts(2316,21): error TS1005: ',' expected. 39node_modules/@types/react/index.d.ts(2316,51): error TS1005: ',' expected. 40node_modules/@types/react/index.d.ts(2316,52): error TS1005: ':' expected. 41node_modules/@types/react/index.d.ts(2318,21): error TS1005: '(' expected. 42node_modules/@types/react/index.d.ts(2318,24): error TS1005: ')' expected.
また、application.tsxのコードを全て消して、console.logのみにしても以下のエラーが出ます。(reactのインポートも消しています。)
error
1node_modules/@types/node/index.d.ts(815,38): error TS2304: Cannot find name 'Set'. 2node_modules/@types/node/index.d.ts(6557,95): error TS2304: Cannot find name 'Symbol'.
TSソースコード
TypeScript
1import * as React from "react"; 2import { render } from "react-dom"; 3 4interface IndexProps {} 5 6interface IndexState { 7 repositoryCount: number; 8 9} 10 11class App extends React.Component<IndexProps, IndexState> { 12 constructor(props: IndexProps){ 13 super(props); 14 this.state = { 15 repositoryCount: 0 16 } 17 } 18 19 render() { 20 return ( 21 <div className="wrapper"> 22 <button 23 onClick={() => this.requestSample()}> 24 ほげ 25 </button> 26 <div className="repository-count"> 27 repository count: {this.state.repositoryCount} 28 </div> 29 </div> 30 ); 31 } 32 33 requestSample(){ 34 return fetch("http://localhost:3000/") 35 .then( (response) => { 36 response.json().then( (resolve) => { 37 console.log(resolve.data.search); 38 this.setState({ 39 repositoryCount: resolve.data.search.repositoryCount 40 }); 41 }); 42 }); 43 } 44} 45 46render(<App/>, document.getElementById("app"));
tsconfig.json
json
1{ 2 "compilerOptions": { 3 "module": "commonjs", 4 "target": "es5", 5 "sourceMap": true, 6 "types" : ["node"], 7 "outDir": "./app/assets/javascripts/", 8 "jsx": "react", 9 "noUnusedLocals": true 10 }, 11 "include":[ 12 "./front/**/*" 13 ], 14 "exclude": [ 15 "node_modules" 16 ] 17}
webpack.config.js
js
1module.exports = { 2 entry: "./front/application.tsx", 3 mode: "development", 4 output: { 5 path: `${__dirname}/app/assets/javascripts/`, 6 filename: "main.js" 7 }, 8 module: { 9 rules: [ 10 { 11 //一応、jsxも残しておく 12 test: /.(js|jsx|tsx)$/, 13 use: [ 14 { 15 loader: "ts-loader", 16 options: { 17 presets: [["env", {"modules": false}], "react"] 18 } 19 } 20 ], 21 exclude: /node_modules/ 22 } 23 ] 24 }, 25 resolve: { 26 extensions:[".js", ".jsx", ".ts", "tsx", ".json"] 27 } 28};
package.json
json
1 "dependencies": { 2 "@types/react": "^16.4.14", 3 "@types/react-dom": "^16.0.7", 4 "react": "^16.5.2", 5 "react-dom": "^16.5.2" 6 }, 7 "devDependencies": { 8 "babel-core": "^6.26.3", 9 "babel-loader": "^7.1.5", 10 "babel-preset-env": "^1.7.0", 11 "babel-preset-react": "^6.24.1", 12 "source-map-loader": "^0.2.4", 13 "ts-loader": "^4.5.0", 14 "typescript": "^3.0.1", 15 "webpack": "^4.16.5", 16 "webpack-cli": "^3.1.0" 17 }
解決方法でなくても、ヒントになりそうな内容でも構いませんので、よろしくお願いいたします。
回答1件
0
自己解決
tscではなく、webpack-cli --entry tsのソースの場所とすることで解決できました。
tscを叩いただけではwebpack.config.jsは読まれないみたいですね。
投稿2018/09/26 15:27
総合スコア18
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。