How to import jsx file in ContentScript?

[linonetwo]

I get

ERROR in ./src/ContentScript/index.ts
Module not found: Error: Can't resolve './FloatingPanel' in 'xxxxx/ContentScript'

/ContentScript/index.ts

import './FloatingPanel';

export {};

/ContentScript/FloatingPanel/index.jsx

import * as React from 'react';
import ReactDOM from 'react-dom';

function FloatingPanel() {
  return <div>aaaa</div>;
}

const mountPointID = 'gamification-floating-ui-root';
document.body.insertAdjacentHTML('afterend', `<div id="${mountPointID}" />`);
ReactDOM.render(<FloatingPanel />, document.querySelector(`#${mountPointID}`));

This will not work.

So, How to render a React widget right into the webpage?

[abhijithvijayan]

i will investigate this soon

[linonetwo]

I guess that is why you export {}; in the index.ts

Oh, I tried out, but after I add export {}; to index.tsx it still can't be resolved...

[abhijithvijayan]

You are using react-javascript branch I presume

[abhijithvijayan]

I will check it out later.

[linonetwo]

Oh， wow, you point out the thing, it should be named index.tsx

Actually I'm using React + TypeScript branch, so this solves my problem, than you for this quick help!

[linonetwo]

This starter works pretty great, thank you for making this. I've followed you in Github now.

[abhijithvijayan]

Cool. Glad to know repo helped.