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.