Webix-jet + react three fiber (r3f)

Hi

Wondering if it’s possible (i failed for moment), to fully integrate react-three-fiber, which use react and threejs), inside a webix-jet application ?

Just curious. It can be a non sense and it sound’s hard :

  • to work with webix-jet, you need a webpack config which is far away from webpack config used by react-scripts.
  • not sure i can mix basic JS with JSX syntax like this
import { JetView } from 'webix-jet';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

export default class Lab3D extends JetView {
  config() {
    return {
      template:'<div id="root3d"></div>'
    }
  }

  ready() {
    ReactDOM.createRoot(document.getElementById('root3d')).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  }
}

Which result with this error, provided by webix-jet webpack :

( Note: i added “@babel/plugin-syntax-jsx”: “7.18.6” )

Module parse failed: Unexpected token (21:64)
File was processed with these loaders:
 * ./node_modules/.pnpm/babel-loader@8.2.5_wfdvla2jorjoj23kkavho2upde/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   };
|   _proto.ready = function ready() {
>     ReactDOM.createRoot(document.getElementById('root3d')).render(<React.StrictMode>
|         <App />
|       </React.StrictMode>);

A non-fully-integrated alternative is perhaps more simple ( iframe )

Dev env with both hotreload webix-jet and react-scripts capabilities

  • webix iframe pointing to a url
  • url declared in webix-jet webpack config as a proxy to react-script
  • react-script (which use webpack too) setup to listen to another port
  • webix-jet app package.json “start” run both webix-jet webpack + react-script …

For production, nginx + proxy pass.

Feedback appreciated, thank you.

I ended up with the iframe solution.