A question about how to enable JSX syntax in JS files

[pyladune]

can't find a way to resolve below issue.

 > js/containers/Offers/Donations.js:68:6: error: Unexpected "<"
    68 │       <div className="Donations margin-top px20">
       ╵       ^

 > js/organization/ProjectCategories.js:56:10: error: Unexpected "<"
    56 │           <img
       ╵           ^

my setttings are js/app.js --bundle --target=es2019 --outdir=../priv/static/assets --log-limit=0

[evanw]

The fix is described in the docs: https://esbuild.github.io/content-types/#jsx.

[pyladune]

tried that already. it just x 10 the number of similar errors ...

[evanw]

You already tried adding --loader:.js=jsx to enable JSX syntax in JS files?

[pyladune]

Yes i did, and this just increase a lot the number of 'errors'

i tied then --inject:./react-shim.js --outfile=out.js but faces now incompatibility between outdir and out

maybe i tried something not reasonable : (esbuild + bootstrap4 + react) + (tailwind +alpinejs) assuming that i want to replace react and bootstrap progressively by tailwind and alpine

Le lun. 22 nov. 2021 à 17:17, Evan Wallace @.***> a écrit :

You already tried adding --loader:.js=jsx to enable JSX syntax in JS files?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/evanw/esbuild/issues/1793#issuecomment-975688741, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPXI7QD4EYCUKTF7IBAQ7DUNJUKTANCNFSM5IQ6ZIAQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[evanw]

The error message you posted looks exactly like using JSX syntax in JavaScript without setting --loader:.js=jsx. If you added --loader:.js=jsx and it's still happening, please post a code sample with build instructions so I can reproduce the problem.

[pyladune]

still fighing with this.

one maybe stupid question : it is asked to remove package.json when upgrading to esbuild. But what about all npm dependencies listed there ? since they are used in the code, how esbuild can catc them?

thanks

Le mar. 23 nov. 2021 à 16:01, Evan Wallace @.***> a écrit :

The error message you posted looks exactly like using JSX syntax in JavaScript without setting --loader:.js=jsx. If you added --loader:.js=jsx and it's still happening, please post a code sample with build instructions so I can reproduce the problem.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/evanw/esbuild/issues/1793#issuecomment-976674560, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPXI7UMHFK5L7Y2NVCXOS3UNOUDJANCNFSM5IQ6ZIAQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[evanw]

You haven't posted a code sample with build instructions so I can reproduce the problem. Adding the unactionable label as there is nothing to do here until more information is provided.

it is asked to remove package.json when upgrading to esbuild

That doesn't make any sense. What says that?

[pyladune]

simply here : https://gist.github.com/chrismccord/2ab350f154235ad4a4d0f4de6decba7b

thanks

Le mar. 30 nov. 2021 à 18:34, Evan Wallace @.***> a écrit :

You haven't posted a code sample with build instructions so I can reproduce the problem. Adding the unactionable label as there is nothing to do here until more information is provided.

it is asked to remove package.json when upgrading to esbuild

That doesn't make any sense. What says that?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/evanw/esbuild/issues/1793#issuecomment-982862315, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPXI7R3DQOCL7MKZRGYZWTUOUDK5ANCNFSM5IQ6ZIAQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[evanw]

I'm going to close this since this doesn't look like a problem with esbuild. It looks like this is a problem with another build system that is layered on top of esbuild, which is not something I can help you with.

[Ryandeboss]

I know it's been a while, evenw, but I think I could really use your help as an expert. Disclaimer, I'm a novice at this stuff so please don't cringe too hard.

Here is the error:

src/components/patterns/ProductListItem/ProductListItem.stories.js:5:30:
      5 │ export const standard = () => <ProductListItem

Here's the error message

The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

I did npm install --save-exact esbuild and it said this:

up to date, audited 1104 packages in 2s

206 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

And then when I did npm fund it just returned a bunch of storybook addons.

I tried doing esbuild app.js --bundle --loader:.js=jsx but it said esbuild is not a recognized cmdlet name.

It was strange because when I did .\node_modules\.bin\esbuild --version it said 0.17.19.

If you can help I'd very much appreciate it.

[evanw]

I tried doing esbuild app.js --bundle --loader:.js=jsx but it said esbuild is not a recognized cmdlet name.

It was strange because when I did .\node_modules\.bin\esbuild --version it said 0.17.19.

If you can help I'd very much appreciate it.

It sounds like maybe you're using PowerShell? I'm very unfamiliar with PowerShell. But since you're saying that running esbuild doesn't work but running .\node_modules\.bin\esbuild does work, maybe you should be using .\node_modules\.bin\esbuild instead of esbuild? Specifically .\node_modules\.bin\esbuild app.js --bundle --loader:.js=jsx might work then. Just a guess.

[Ryandeboss]

I should've thought about that. Thanks.

[Fusseldieb]

I had the issue The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that. and it drove me nuts.

This was the first link that popped up on Google, so I'll comment it here. Hopefully it's in the right place.

In Vue 3, I solved it by npm install @vitejs/plugin-vue-jsx and use following in vite.config.js:

...
import vueJsx from '@vitejs/plugin-vue-jsx' // Added this!
...
export default defineConfig({
  plugins: [
    vue(),
    vueJsx() // Added this!
  ],

Also, in the file(s) I used JSX syntax, I made sure that it was aware of it by beginning script with:

<script setup lang="jsx">

I hope this helps somebody out there

[abigailjulie]

I had the issue The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that. and it drove me nuts.

This was the first link that popped up on Google, so I'll comment it here. Hopefully it's in the right place.

In Vue 3, I solved it by npm install @vitejs/plugin-vue-jsx and use following in vite.config.js:

...
import vueJsx from '@vitejs/plugin-vue-jsx' // Added this!
...
export default defineConfig({
  plugins: [
    vue(),
    vueJsx() // Added this!
  ],

Also, in the file(s) I used JSX syntax, I made sure that it was aware of it by beginning script with:

<script setup lang="jsx">

I hope this helps somebody out there

Would this also work in react?