Typescript [React]没有将.tsx导入转换为.jsx导入

Typescript [React] not converting .tsx imports to .jsx imports

本文关键字：导入 tsx 转换 jsx React Typescript      更新时间：2023-09-26

我将typescript react组件保存在不同的文件中，所以我使用下面的语句来导入我的子组件。

//app.tsx 

import {SideBar} from "./sidebar"

但是当typescript将app.tsx编译为app.jsx时，import语句会切换为require("sidebar")。我在javascript上得到一个错误，因为require语句需要有"侧栏"。Jsx"with"。jsx"扩展。我能把它自动化吗?

我的tsconfig设置是:

{
    "compilerOptions": {
        "jsx": "preserve",
        "target": "ES5",
        "noImplicitAny":false,
		"module": "commonjs",
        
    }
}

也许我需要添加一些东西到tsconfig文件?

选项1

我在javascript上得到一个错误，因为require语句需要有"侧栏"。Jsx"with"。jsx"扩展。

修复这个错误，例如，如果你使用webpack，你可以添加.jsx作为一个可解析路径。

resolve: {
  // Add `.jsx` as a resolvable extension.
  extensions: ['', '.webpack.js', '.web.js', '.jsx']
},

如果是这样的话，甚至可以使用ts-loader: https://github.com/TypeStrong/ts-loader，而不是jsx: preserve，而是jsx: react。更多:https://basarat.gitbooks.io/typescript/content/docs/jsx/tsx.html

<标题>选项2 h1> 用module: es6代替"module": "commonjs",, typescript将不会将import重写为require。
相关文章：