JSX Render Functions in Nuxt 2 with Nuxt Bridge are failing

[loweoj]

Environment

Nuxt CLI v3.0.0-27234503.d5127e9
RootDir: /sandbox
Nuxt project info:

---

• Operating System: Linux
• Node Version: v14.17.6
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: buildModules
• Runtime Modules: -
• Build Modules: @nuxt/[email protected]

---

Describe the bug and expected behavior

Attempting to use JSX inside a render function is now failing with Syntax Error: Unexpected token, expected ","

Steps to reproduce

View the compilation error in context here:
https://codesandbox.io/s/suspicious-euclid-g904s?

I expect to see "Hello Nuxt!" wrapped in a div with a class of "a-container-class".

Additional context

This code was working without the upgrade nuxt bridge.

[604587986]

+1

[tylerforesthauser]

I just wanted to check in on the status of this. I am facing issues with syntax errors when attempting to run my Nuxt 2 project with Bridge. Is there a way to configure my project to use Vite instead of webpack? Would that resolve my issue?

[loweoj]

The Code Sandbox I attached here is still failing to build, despite some work in the right direction. What more needs to be done to fix this? Happy to submit a PR if someone can point me in the right direction?

[604587986]

+1,if use defineNuxtConfig babel presets will be unuseful

[zafarich]

+1

[lauer3912]

+1

[danielroe]

Yes, I can confirm the issue persists (reproduction - and working without Bridge), though a workaround is to enable vite mode @tylerforesthauser:

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    vite: true,
  },
})

[homerjam]

Does anyone have a workaround for this? Apart from Vite which unfortunately is a no-go at the moment

[Chapaev17]

+1

[gokalpfirat]

@danielroe Any updates for webpack?

[chuckadams]

The workaround to enable vite does not work for me, though it does give me nicer-looking error messages:

 ERROR  [commonjs--resolver] Unexpected token (Note that you need plugins to import files that are not JavaScript)                                           9:12:36 AM
file: [redacted]
225: 
226:         return (
227:             <div class={['p-splitter p-component', 'p-splitter-' + this.layout]}>
                 ^
228:                 {this.$slots.default}
229:                 {

 ERROR  Unexpected token (Note that you need plugins to import files that are not JavaScript)                                                                9:12:36 AM

The error appears to go away when I edit the <script> tag to <script lang="jsx">. This is in a third-party library however, so it's not feasible for me to patch, and it worked without the change prior to migrating to nuxt bridge.

[wattanx]

If you use jsx/tsx with nuxt/bridge, you need to add the isTSX option.(It is possible that it will not be needed in the future.)
#1064

export default defineNuxtConfig({
  birdge: {
    typescript: { isTSX: true }
  }
})