Cannot use `.tsx` or `.jsx` pages

Environment

Nuxt CLI v3.0.0-27383920.81ee59c RootDir: /tmp/tmp.Qv46ef5Cmn/nuxt3-app Nuxt project info:

---

• Operating System: Linux
• Node Version: v17.3.0
• Nuxt Version: 3.0.0-27383920.81ee59c
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Create a JSX or TSX file in the pages folder and export a component from it. Example:

// pages/page.jsx
import { defineComponent } from "vue";

export default defineComponent({
  render(h) {
    return (
      <div>
        <h1>Test page</h1>
      </div>
    )
  }
});

Describe the bug

The CLI reports a warning when building. When the page is loaded in dev mode Vite reports an error and the page isn’t rendered.

The error being:

Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

Additional context

I tried looking up if any additional configuration is needed for Nuxt to parse .jsx and .tsx files but found that it wasn’t for v2. I therefore presumed Nuxt 3 wouldn’t need any additional configuration either.

Logs

Build:

 WARN  [SSR] Error transforming /pages/page.jsx?macro=true: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

  at formatError (node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46)
  at TransformContext.error (node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19)
  at TransformContext.transform (node_modules/vite/dist/node/chunks/dep-f5552faa.js:73659:22)
  at async Object.transform (node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30)
  at async doTransform (node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29)

Page load:

 ERROR  16:07:56 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /tmp/tmp.Qv46ef5Cmn/nuxt3-app/pages/page.jsx?macro=true
  5  |      return (
  6  |        <div>
  7  |          <h1>Test page</h1>
     |                            ^
  8  |        </div>
  9  |      )
      at formatError (/tmp/tmp.Qv46ef5Cmn/nuxt3-app/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46)
      at TransformContext.error (/tmp/tmp.Qv46ef5Cmn/nuxt3-app/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19)
      at TransformContext.transform (/tmp/tmp.Qv46ef5Cmn/nuxt3-app/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73659:22)
      at async Object.transform (/tmp/tmp.Qv46ef5Cmn/nuxt3-app/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30)
      at async doTransform (/tmp/tmp.Qv46ef5Cmn/nuxt3-app/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29)

[danielroe]

Created an issue to track upstream: https://github.com/vitejs/vite/issues/7118.

[baryla]

Having the same issue. It’s worth noting that /App.tsx works absolutely fine and so do /components/** if you import them inside /App.tsx. There just seems to be a problem with /pages.

What is indeed a little bit strange is that you can do this for a workaround until a fix:

// pages/index.tsx

import HomePage from '~/_pages';

export default HomePage;

// _pages/index.tsx

import { defineComponent } from 'vue';

export default defineComponent(() => {
  return () => <h1>inside _pages</h1>;
});

This does however show a warning in the browser console regarding Hydration text mismatch when I change the content of _pages/index.tsx. HMR works fine though, just the warning shows in the console:

runtime-core.esm-bundler.js:38 [Vue warn]: Hydration text mismatch:
- Client: "inside _pages!"
- Server: "inside _pages" 
  at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false > key="/" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Anonymous > 
  at <Anonymous > 
  at <NuxtLayout> 
  at <App> 
  at <NuxtRoot>