Looking for tips on how to integrate an existing react component

#1

I’m trying to build an extension that utilizes an existing React component from another project. Right now I’m just building and minifying that component into a separate .js file, and inserting the DOM in ReactWidget.onAfterAttach(). That works, but I’m thinking that is not as efficient as importing the react component itself in typescript.

The problem is that this project uses .js files for the react components, and webpack doesn’t recognize them as .jsx. files and throws a syntax error. I’m not too experienced with React, but I can hack my way around a project. Is there a way to make this work so that I can import the project as a dependency and import the react component?

#2

Have you tried to customize the webpack.config.js? I have not tried, but I understand the following; we generate the webpack config for the app. This is the gen-webpack.config.js. We also generate the webpack.config.js, which loads gen-webpack.config.js. In the webpack.config.js, there is some documentation:

This file can be edited to customize webpack configuration.
To reset delete this file and rerun theia build again.

I think it should be possible to add any custom rules (module.rules) to loads jsx.

#3

I just realized the project I was using has a dist/ dir with files compiled to JS. I’m using that, and it seems to work (except for some other errors I’m running into).