7

I have an existing React component that's coded in JSX and I can't convert to Typescript at this time. I'd like to make use of it in a new React application that is being written in Typescript. I cannot figure out if it's possible to import and use the JSX code within the TSX code. Is this possible? How do I do it?

Thanks

The example below gives the error: TS2604:JSX element type 'OldCode' does not have any construct or call signatures.

OldCode.jsx

import React from 'react'

export default React.createClass({
  render() {
    return <div>OldCode</div>
  }
})

NewCode.tsx

import * as React from 'react';
import { OldCode } from './OldCode';

export default class NewCode extends React.Component<any, any> {
  render() {
    return (
      <OldCode/>
    );
  }
}
Jobu
  • 590
  • 7
  • 18
  • I gave up on using Typescript for this project and never tracked down why @djwwwww's answer didn't work for me. My instinct says it's right, but since I couldn't confirm, I didn't mark it accepted. – Jobu Jan 01 '17 at 20:49
  • Try this in tsx to import jsx: `const NewCode = require('./NewCode').default;` – cwtuan Apr 26 '18 at 06:16

3 Answers3

0

Trying changing your import statement:

import OldCode from './OldCode';

If you are using webpack you may need to add .jsx to your resolvers too.

erik-sn
  • 2,590
  • 1
  • 20
  • 37
  • thanks for taking a look, but changing the import syntax doesn't change the results. I do have .jsx in my webpack resolvers, but that's downstream from here. I need tsc to be able to compile the tsx first. – Jobu Dec 30 '16 at 02:42
0
declare module '*.jsx' {
    var _: React.Component<any, any>;
    export default _;
}

and use it like 

import OldCode from './OldCode.jsx';

put this in some file, make sure it's included in tsconfig.json.

and of course, make sure webpack packs them all.

Qiaosen Huang
  • 1,093
  • 1
  • 10
  • 25
  • this sounds like the right track, but I've tried it and still get the same error. Perhaps I misunderstood an instruction? I've created a new file `jsx_compat.tsx` in the same directory as OldCode.jsx that holds your first block and added `jsx_compat.tsx` to my tsconfig.json. – Jobu Dec 30 '16 at 03:47
  • Sorry, can't edit the comment above where I hit enter too soon. this sounds like the right track, but I've tried it and still get the same error. Perhaps I misunderstood an instruction? I've created a new file `jsx_compat.tsx` in the same directory as OldCode.jsx that holds your first block and added `jsx_compat.tsx` to my tsconfig.json. I've also modified my import statements to match. Any more suggestsion? I will remember to make sure webpack packs them all, but right now, I'm failing at the call to `tsc`. – Jobu Dec 30 '16 at 03:48
  • @Jobu here is an example of how you import other-than-ts modules, https://github.com/webgl-component/core. And what error did `tsc` generate? – Qiaosen Huang Dec 30 '16 at 03:52
  • thanks I'll read the example. The error message from tsc is `TS2604:JSX element type 'OldCode' does not have any construct or call signatures.` – Jobu Dec 30 '16 at 03:58
  • @Jobu try putting the module definitions in `.d.ts` files. – Qiaosen Huang Dec 30 '16 at 04:06
  • Just tried renaming to jsx_compat.d.ts and no change. It seems like your recommendation is straight out of https://github.com/Microsoft/TypeScript/issues/6615 and I'm using tsc 2.1.4, so I'm guessing I'm missing something arcane at this point, but I can't guess what that might be. – Jobu Dec 30 '16 at 04:13
  • @Jobu did you include `.d.ts`, I just tried, it worked for me. – Qiaosen Huang Dec 30 '16 at 04:52
  • when you say "include .d.ts" what do you mean? – Jobu Dec 30 '16 at 04:53
  • https://gist.github.com/joesonw/946019d08eadcda00ecbc539dcc29b31, and compile it with `tsc --allowJs -p tsconfig.json` – Qiaosen Huang Dec 30 '16 at 04:56
  • thanks for trying, but no change for me. I'm going to take a break and go over OldCode.jsx with fresh eyes and hope I see something. – Jobu Dec 30 '16 at 05:12
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131933/discussion-between-jobu-and-djwwwww). – Jobu Dec 30 '16 at 21:21
-1

Since there's no accepted answer I will link to my question that actually answers how to write a definition file for an existing component (my question is about a component wrapped in a redux connect):

[How do I create a typescript definition file (d.ts) for an existing redux connected (jsx)component?

Hope it helps someone...

Matt
  • 141
  • 9
  • You can add a comment to the question, and your [so] link will show up in the sidebar under _Linked_. There's no need to add an answer with no solution. – jpaugh Aug 29 '23 at 21:58