React/Typescript /VScode - 导入路径不能以“.tsx”扩展名结尾
Posted
技术标签:
【中文标题】React/Typescript /VScode - 导入路径不能以“.tsx”扩展名结尾【英文标题】:React/Typescript /VScode - an import path cannot end with a '.tsx' extension 【发布时间】:2020-05-02 12:28:01 【问题描述】:我有一系列已转换为 typescript 的 react 项目。其中一些使用 webpack,其中一些只使用 babel,因为它们是其他(webpack)项目/实际应用程序使用的库。
我已经将所有内容都转换为 typescript 没有问题,除了在一个非 webpack 项目中,我收到错误“导入路径不能以 .tsx 扩展名结尾”,例如在
import LoadingLogo from '../ui/LoadingLogo.tsx';
我可以通过省略扩展或使用 // @ts-ignore 来解决这个问题,但这些都不是最佳解决方案,因为项目将在重构时混合 jsx 和 tsx,我会希望能够一目了然地看到导入中使用的文件类型。
我将项目转换为打字稿所采取的步骤是
-
安装打字稿
安装@babel/preset-typescript
添加
presets: [ @babel/preset-typescript ]
到我的 babel.config.js
为了让事情变得更加混乱,在其他(非 webpack)应用程序之一中,我运行了相同的 babel 设置,但我没有看到这个问题。我有什么明显的遗漏吗?作为参考,我在有问题的项目中的 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',
s-s-r: true
],
'syntax-async-functions',
'@babel/plugin-syntax-dynamic-import',
'dynamic-import-node'
]
,
development:
plugins: [
[
'babel-plugin-styled-components',
s-s-r: 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'
]
;
;
我在非 webpack 项目中的 babel 配置没有问题看起来像这样
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',
s-s-r: true
],
'syntax-async-functions',
'@babel/plugin-syntax-dynamic-import',
'dynamic-import-node'
]
,
development:
plugins: [
[
'babel-plugin-styled-components',
s-s-r: 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"]
我的第一直觉是查看模块解析器插件,但这似乎没有任何区别。我有什么明显的遗漏吗?
【问题讨论】:
仅供参考,我已经创建了一张与这张类似的票,但具体到我所面临的伤害:***.com/questions/62437380/… 【参考方案1】:很抱歉,我怀疑您能否以您希望的方式解决此问题。 TypeScript(特别是 TSC)不允许对 ts/tsx 文件进行显式扩展......它与导入中的隐式文件扩展名以及 ts/tsx 文件如何编译为 js/jsx 文件有关。 The world may not be happy about it,但它似乎是这样的。
你可以使用// @ts-ignore
,但我认为you would lose intellisense
更新:下面的 cmets 引起了我的注意,一些 TypeScript 工具确实允许扩展。显然 Deno 需要它们,尽管我没有与 Deno 合作过。 TSC 编译器不允许它们。
【讨论】:
一些 TypeScript 工具允许显式扩展,而另一些则不允许。说 TypeScript 禁止它们是不准确的。在 Deno 中,它们是强制性的。在许多其他运行时,它们是可选的。在 VS Code 的 linter 中,它们是完全不允许的。 很高兴知道。我将基于此更新我的答案。应该注意的是,我所说的不允许扩展的不是 VSCode,而是 TSC。【参考方案2】:我将它添加到我的 webpack.config.js 中,它有帮助
module.exports =
//...
resolve:
extensions: ['.js', '.jsx', '.ts', '.tsx'],
,
;
您可能希望将'...'
添加到数组的末尾,以便它可以解析其他扩展。更多关于 webpack 解析扩展的信息:https://webpack.js.org/configuration/resolve/#resolveextensions
【讨论】:
【参考方案3】:有时可以通过在根级别创建 next.config.js 和 tsconfig.json 并重新运行应用程序来解决此问题。
【讨论】:
以上是关于React/Typescript /VScode - 导入路径不能以“.tsx”扩展名结尾的主要内容,如果未能解决你的问题,请参考以下文章
使用 graphql 将道具传递给高阶组件时出现 React-apollo Typescript 错误
React + Typescript:TypeScript 错误:类型“字符串”与类型“CSSProperties”没有共同的属性
Webpack + React + TypeScript:未找到模块 ... in ... node_modules/react/