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”扩展名结尾的主要内容,如果未能解决你的问题,请参考以下文章

React/Typescript Ag-grid

使用 graphql 将道具传递给高阶组件时出现 React-apollo Typescript 错误

React + Typescript:TypeScript 错误:类型“字符串”与类型“CSSProperties”没有共同的属性

Webpack + React + TypeScript:未找到模块 ... in ... node_modules/react/

使用react搭建组件库:react+typescript

在 React/Typescript 中输入对象