Is it wrong to use jsx with Quasar?

matepaiva

Hi, guys! First of all: I am loving quasar. Such a complete tool!

I have used both Angular and React. And now I am trying vueJs, and I really prefer to use render functions with JSX over template.

I already added the jsx babel and eslint plugin to make it work with quasar. It is working like a charm. But, as I can’t find any examples, I wonder if what I am doing is wrong or unrecommended.

I started this project yesterday and I didn’t test all the corners. It is working perfectly in quasar dev mode, on browser. I wonder what is the probability to fail on mobiles or when build to production.

Can you give me some advices on this subject?

Thank you all in advance!

leopiccionia

I have never tried using JSX with Quasar, and seldom used it with Vue (template syntax has better directive modifiers and arguments, and it’s awesome with Pug).

However it shouldn’t fail. Both JSX and templates are compiled under the hood to vanilla render functions (even though JSX requires plugins, that you seem to be already using). Razvan himself use render functions a lot (source), without JSX.

I don’t know anybody using Quasar with JSX, but, if you like it this way, I suggest you to try it (on production, mobile, etc.) and, if you find any bug, reporting it on GitHub.

rstoenescu

You can use JSX with no problems. Have no fear.

huafu

@rstoenescu all good with JSX except I can’t figure out how to use directives (such as v-close-overlay), little bit of help here would be nice

kosirm

@matepaiva would you mind to explain what is the best way to add jsx babel to the latest quasar? I would like to use some jsx, but I can’t figure out the right way to do it.

kosirm

@matepaiva never mind, I figured out. I had a problem because of an older quasar cli in project, probably. On new quasar project everything is working fine.

ThePianoDentist

I am newly using quasar-cli (switching from vue-cli).

and I have not written any jsx. but I think some of my imports use jsx, as I’m getting this error

 error  in ./node_modules/expo-notifications/build/NotificationPermissions.js

Module parse failed: Unexpected token (13:46)
File was processed with these loaders:
 * ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js
You may need an additional loader to handle the result of these loaders.
|         throw new UnavailabilityError('Notifications', 'requestPermissionsAsync');
|     }
>     const requestedPermissions = permissions ?? {
|         ios: {
|             allowAlert: true,

I do not understand what I need to add to my project to make it work. I tried making my babel.config.js to the exact same thing as my vue-cli app. Same error.
The vue-cli uses a metro config/bundler, I’m wondering if I need that? Overall I am very lost.

(Apologies if isn’t related, but I feel a bit embarrassed making a dedicated thread to my issue, when it’s probably my complete ignorance of JS transpiling and packaging landscape, and not really a quasar-specific problem)

No More Posting New Topics!

Is it wrong to use jsx with Quasar?