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

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.

Perhaps put all .tsx files in a separate folder, entirely? — Sal Rahman
– Sal Rahman, Commented Sep 25, 2016 at 22:45

basarat · Accepted Answer · 2016-09-26 00:42:23Z

0

Option 1

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

Fix this error e.g. 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.

answered Sep 26, 2016 at 0:42

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Option 1

Option 2

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option 1

Option 2

Comments

Your Answer

Sign up or log in

Post as a guest

Related