我試圖將我的專案從js移動到ts，所以我已經安裝了型別簽字，現在我正在更改.js到.ts的所有檔案的擴展名，然后我試圖再次啟動專案并似乎可以' t決議.tsx檔案
這是我專案的檔案夾樹（請注意，我只是將按鈕組件更改為.tsx以進行測驗目的，而不是所有檔案，否則我會得到更多的錯誤）
這是我進入控制臺的錯誤
> ERROR in ./src/components/Button/Button.styles.js 3:0-30
Module not found: Error: Can't resolve './Button' in 'C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button'
resolve './Button' in 'C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button'
using description file: C:\Users\sriera\Desktop\Nuevacarpeta\pt\package.json (relative path: ./src/components/Button)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Users\sriera\Desktop\Nuevacarpeta\pt\package.json (relative path: ./src/components/Button/Button)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button doesn't exist
.web.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.mjs doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.mjs doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.json doesn't exist
.web.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.jsx doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.jsx doesn't exist
as directory
C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button doesn't exist
@ ./src/components/UserList/UserList.js 11:0-55 101:45-57
@ ./src/pages/Home/Home.js 5:0-58 23:35-43
@ ./src/App.js 8:0-37 27:44-48
@ ./src/index.js 8:0-24 18:39-42
webpack 5.69.1 compiled with 1 error in 793 ms
OFC，如果我只是將TSX擴展更改為JS仍然有效
編輯：這是package.json
{
"name": "pt",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.4.4",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"eslint": "^8.10.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router": "^6.2.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@testing-library/react": "^12.1.3",
"jest": "^27.5.1",
"redux-devtools": "^3.7.0",
"redux-devtools-extension": "^2.13.9",
"typescript": "^4.6.2"
}
}
有人有想法嗎？
謝謝！
uj5u.com熱心網友回復：
默認的CRA模板是為JavaScript而不是CypeScript構建的。
您現在可以做的是按照Tiago提供的文章中的步驟。另外，如果您想默認使用型別簽名，則CRA確實提供了一個模板
npx create-react-app <App Name> --template typescript
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/440110.html
標籤：javascript 反应 网页包 tsx
上一篇：！javascript中的函式？