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

Question

I keep typescript react components in different files, so I use the following statement to import my sub components.

//app.tsx

 import {SideBar} from "./sidebar" 

But when typescript compiles app.tsx to app.jsx, the import statement switches to require("sidebar"). I get an error on the javascript as the require statement needs to have "sidebar.jsx" with ".jsx" extension. Is there a way I could automate that?

My tsconfig setting is :

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

Maybe I need to add something to the tsconfig file?

Thanks in advance.

Answer 1

Option 1

I get an error on the javascript as the require statement needs to have "sidebar.jsx" with ".jsx" extension.

Fix this error eg if you are using webpack you can add .jsx as a resolvable path.

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

If so maybe even use ts-loader : https://github.com/TypeStrong/ts-loader and not have jsx: preserve and instead jsx: react . More : https://basarat.gitbooks.io/typescript/content/docs/jsx/tsx.html

Option 2

Use module: es6 instead of "module": "commonjs", and typescript will not rewrite import to require .