I figured out how to use React inside a Desk Page.
Assuming you created hello.jsx and myapp.bundle.js above.
1-Use Desk to create a Page(not a WebPage) called mypage (anything you want). Make sure it’s standard and choose your module.
2-A directory named mypage will be created along with files named mypage.js and mypage.json.
3-In mypage.js add this
Thank you for your answers, I realized that I’m still using Frappe 12.11.0 and ERPNext 12.13.0 which doesn’t have the esbuild.js. I suppose that’s also the reason why I keep getting the error “cannot use import statement outside a module”.
I will try to update these two apps version and let you know how it goes.
Thank you again for your efforts.
It’s been a good learning experience but I’m afraid I hit a dead end with Frappe.
Making React work in Frappe is possible it’s not practical.
My use case is simple, I tried to implement a Desk page to should PrimeReact table here
I was not able to import css(import 'primeicons/primeicons.css';) files easily and had to modified frappe’s esbuild script to do so.
After building, the resulting css bundle was in the wrong directory and was unable to be loaded by Desk.
Long story short, this is the end of the road for me in Frappe.
It’s a great framework that makes simple things easy, but unfortunately the hard things are impossible. Good luck everyone.
I’d recommend to first convert anything from any modern js framework to es5
and then use those packaged dist in frappe’s build.json
During first conversion setup your js build system however you like. Once we get it in es5 we can treat it as any other third party .min.js used in frappe framework.
The plus here is, you get all the power of metadata driven frappe framework to build the backend. If not you’ll need to wire up a lot of choices together to represent validated models in ReST/GraphQL API.
I got React working as frontend !, so the problem was esbuild will produce .js and .css and the .css file has no “entryPoint” so frappe simply ignores it. To fix this i avoided using css and used styled-components, using this esbuild does not produce a different css file and everything simply works !
You can access the frappe object in development as well, and there’s no need to use an api proxy nor there’s a need to build web-components
Also note that esbuild is only available on frappe’s develop branch, frappe v13 used rollup which doesn’t compile jsx on its own, there’s ways to make it work, but esbuild worked out-of-the-box