Problems with tsx template

[cernymatej]

Reporting a bug?

After upgrading @nuxtjs/i18n from 8.5.3 to v9, I encountered several pre-transform errors. In my main project, it was the following error message: Pre-transform error: '>' expected. I tracked this down to an issue with parsing TSX templates.

While stripping down the project to identify the root cause, I also encountered the following errors:

ERROR  Internal server error: ',' expected.
   10:26:17 AM
  Plugin: unplugin-vue-i18n:directive

and

Pre-transform error: Type expected.

The last one is present in the minimal reproduction linked below.

This issue wasn’t present in @nuxtjs/[email protected].

This seems to work fine:

<script lang="ts">
export default defineComponent((props, ctx) => {
  return () => h('div', ['Test'])
})
</script>

I hope this reproduction is usable, even though it doesn’t directly use unplugin-vue-i18n, as it’s minimal enough to demonstrate the issue and doesn't use any @nuxtjs/i18n features.

Expected behavior

Tsx templates to work.

Reproduction

https://stackblitz.com/edit/github-ffpcjt-qcfsie?file=components%2FTestComponent.vue

Working:
https://stackblitz.com/edit/github-ffpcjt?file=nuxt.config.ts,components%2FTestComponent.vue,app.vue

Issue Package

unplugin-vue-i18n

System Info

System:
    OS: macOS 15.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 5.24 GB / 96.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.9.0 - ~/Library/pnpm/pnpm
    bun: 1.0.25 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.116
    Safari: 18.1

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.

[kazupon]

Thank you for your reporting!

Pre-transform error: Type expected.

Unfortunately, I could not reproduce the about error in my stackblitz environment 😿
Could you try to reproduce with CONSOLA_LEVEL=999 nuxt dev 🙏
That log level is able to output stack error on nuxt log (consola)

And I have a favor to ask. Two type of your github issues have been reported.
Please separate them as separate issues. It makes it easier for us to work on the issue. 🙏

[ankeycheng]

@kazupon Hi, please try this reproduction, I think this is another similar issue, when using jsx/tsx in setup mode, the error message shows [plugin:unplugin-vue-i18n:directive] Unterminated regular expression literal.
https://stackblitz.com/edit/github-ffpcjt-6wnhlw?file=components%2FTestComponent.vue

and if you try to reference a variable in node like this:

<script lang="tsx" setup>
const foo = 'foo';
const Test = () => <div>Test{foo}</div>;
</script>

the error message shows [plugin:unplugin-vue-i18n:directive] ',' expected. which @cernymatej mentioned above.

[kazupon]

I mean regarding the following error.

Pre-transform error: Type expected.

I recognize about tsx (jsx) issue.

[cernymatej]

Oh, I'm sorry, I only attached the working reproduction.
The error message should be present here: https://stackblitz.com/edit/github-ffpcjt-qcfsie?file=components%2FTestComponent.vue

(I cannot verify that the error message is still present at the moment, since I have only my iPad on me right now, and it cannot start the dev server on StackBlitz. I have written the component code from memory. I'll be able to check it in about 4 hours.)

---

Btw. could you please help me understand what two types of issues you mean? I thought that this is all related to the same parsing issue.

---

Edit: So, I've checked it and the reproduction above shows the [plugin:unplugin-vue-i18n:directive] ',' expected. error message. I cannot figure out what I did to get the Pre-transform error: Type expected. error, however, I've managed to create a reproduction for the original Pre-transform error: '>' expected. error, which you can find here:
https://stackblitz.com/edit/github-ffpcjt-6cqg2q?file=components%2FTestComponent.vue,app.vue