대응/유형 스크립트/VScode - 가져오기 경로는 '.tsx' 확장자로 끝날 수 없습니다.
저는 제가 활자로 변환한 일련의 반응 프로젝트가 있습니다.이 중 일부는 웹 팩을 사용하고, 일부는 다른 (웹 팩) 프로젝트/실제 응용 프로그램에서 사용하는 라이브러리이기 때문에 바벨을 사용합니다.
웹 팩이 아닌 한 프로젝트에서 '가져오기 경로가 .tsx 확장자로 끝날 수 없습니다.' 오류가 발생하는 경우를 제외하고는 문제 없이 모두 유형 스크립트로 변환했습니다.
import LoadingLogo from '../ui/LoadingLogo.tsx';
확장자를 생략하거나 // @ts-ignore를 사용하여 이 문제를 해결할 수 있지만, 이 두 가지 모두 최적의 해결책은 아닙니다. 프로젝트가 리팩터링되는 동안 jsx와 tsx가 혼합되고 가져오기에 사용되는 파일 형식을 한 눈에 볼 수 있기 때문입니다.
프로젝트를 유형 스크립트로 변환하기 위해 수행한 단계는 다음과 같습니다.
- 설치 유형 스크립트
- @babel/preset-type 스크립트 설치
- 더하다
presets: [ @babel/preset-typescript ]
내 babel.config.js에
더욱 혼란스럽게도, 다른 (웹 팩이 아닌) 앱 중 하나에서 동일한 바벨 설정이 실행되고 있으며 이 문제가 보이지 않습니다.제가 놓친 게 분명한가요?참고로 이 문제가 있는 프로젝트의 babel.config는 다음과 같습니다.
module.exports = function(api) {
api.cache(true);
return {
ignore: ['node_modules/**/*'],
presets: [
['@babel/preset-typescript'],
[
'@babel/preset-env',
{
loose: true,
targets: {
node: 'current'
}
}
],
'@babel/preset-react'
],
env: {
translations: {
plugins: [
'syntax-async-functions',
'@babel/plugin-syntax-dynamic-import',
'dynamic-import-node',
[
'react-intl',
{
messagesDir: './messages',
enforceDescriptions: false
}
]
]
},
production: {
plugins: [
'jsx-strip-ext',
[
'babel-plugin-styled-components',
{
ssr: true
}
],
'syntax-async-functions',
'@babel/plugin-syntax-dynamic-import',
'dynamic-import-node'
]
},
development: {
plugins: [
[
'babel-plugin-styled-components',
{
ssr: true
}
],
'syntax-async-functions',
'@babel/plugin-syntax-dynamic-import',
'dynamic-import-node'
]
}
},
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-json-strings',
'@babel/plugin-transform-classes'
]
};
};
그리고 문제가 없는 비 웹팩 프로젝트의 내 바벨 구성은 다음과 같습니다.
module.exports = function(api) {
api.cache(true);
return {
presets: ['@babel/preset-typescript'],
ignore: ['node_modules/**/*'],
extends: 'myProject/babel.config.js',
env: {
production: {
plugins: [
[
'module-resolver',
{
alias: {
'^myProject/src/(.+)': 'myProject/lib/\\1'
},
extensions: ['.js', '.jsx'],
stripExtensions: ['.js', '.jsx']
}
],
[
'babel-plugin-styled-components',
{
ssr: true
}
],
'syntax-async-functions',
'@babel/plugin-syntax-dynamic-import',
'dynamic-import-node'
]
},
development: {
plugins: [
[
'babel-plugin-styled-components',
{
ssr: true
}
],
'syntax-async-functions',
'@babel/plugin-syntax-dynamic-import',
'dynamic-import-node'
]
}
}
};
};
두 프로젝트의 tsconfig.json은 다음과 같습니다.
{
"compilerOptions": {
"module": "esnext",
"outDir": "dist/",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"target": "ESNext",
"allowJs": true,
"checkJs": false,
"jsx": "react",
"pretty": true,
"skipLibCheck": true,
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"lib": ["dom", "dom.iterable", "ESNext"],
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true
},
"include": ["src"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
저의 첫 번째 본능은 모듈 리졸버 플러그인을 보는 것이었지만, 그것은 아무런 차이가 없는 것처럼 보였습니다.제가 놓친 게 분명한가요?
유감스럽게도 당신이 원하는 방식으로 이 문제를 해결할 수 있을지 의문입니다.TypeScript(특히 TSC)에서 ts/tsx 파일에 대한 명시적 확장을 허용하지 않습니다...가져오기의 암시적 파일 확장명과 ts/tsx 파일이 js/jsx 파일로 컴파일되는 방법과 관련이 있습니다.세상은 그것에 대해 행복하지 않을 수도 있지만, 그것은 있는 그대로인 것처럼 보입니다.
사용할 수 있습니다.// @ts-ignore하지만 그렇게 되면 당신은 지능을 잃을 것입니다.
업데이트: 일부 TypeScript 도구가 확장을 허용한다는 것이 아래 설명에서 알게 되었습니다.분명히 데노는 그것들을 필요로 하지만, 저는 데노와 함께 일한 적이 없습니다.TSC 컴파일러에서 허용되지 않습니다.
파일 이름을 navMenus.tsx에서 navMenus.ts로 바꾸고 가져온 방법을 다음에서 변경했습니다.
import { navMenus } from "../../views/navMenus.tsx";
로.
import { navMenus } from "../../views/navMenus";
이것이 그 문제를 해결했습니다.
문제를 해결하려면 다음이 필요합니다.
- project.json에 코드가 있는 tsconfig.json 파일이 있는지 확인합니다.
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
- 코드를 사용하여 react-app-env.in .ts 파일을 확인하거나 만듭니다.
/// <reference types="react-scripts" />
TypeScript에서 ts, tsx 등의 파일 확장자로 작업하는 방법을 설명하는 react-app-env.d.ts 파일입니다.
- 가져오기에서 tsx 파일 확장명을 제거합니다.또한 TypeScript에서 욕할 모든 확장을 제거합니다.
예를 들어 다음과 같습니다.
import { Header } from "./Header.tsx";
확장을 제거한 후에는 다음과 같이 해야 합니다.
import { Header } from "./Header";
- 이러한 변경 시점에 프로젝트가 실행 중인 경우 프로젝트를 중지했다가 다시 시작합니다.이러한 변경 사항은 프로젝트가 컴파일 단계에서 시작될 때만 적용되므로
나는 이것을 나의 webpack.config.js에 추가했고 그것은 도움이 되었습니다.
module.exports = {
//...
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
};
추할수있다니습을 추가하는 것이 좋을 .'...'다른 확장을 확인할 수 있도록 배열의 끝으로 이동합니다.웹 팩의 해결 확장에 대한 자세한 내용은 여기에서 확인하십시오. https://webpack.js.org/configuration/resolve/ #discovery 확장
루트 수준에서 next.config.js 및 tsconfig.json을 생성하고 응용 프로그램을 다시 실행하여 이 문제를 해결할 수도 있습니다.
언급URL : https://stackoverflow.com/questions/59756485/react-typescript-vscode-an-import-path-cannot-end-with-a-tsx-extension
'programing' 카테고리의 다른 글
| Mongodb로 퍼지 검색? (0) | 2023.07.05 |
|---|---|
| https로 보호되는 웹 사이트를 만드는 방법 (0) | 2023.07.05 |
| select 문의 하위 쿼리가 오라클에서 작동하는 방식 (0) | 2023.07.05 |
| 소스 트리에서 두 개의 분기에서 시각적 차이를 얻을 수 있는 방법이 있습니까? (0) | 2023.07.05 |
| MongoDB는 문서를 어디에 저장합니까? (0) | 2023.07.05 |