Error: React Router Vite plugin can't detect preamble. Something is wrong.

[akoskm]

Using create-react-router I set up a simple project and wanted to add Vitest and React Testing Library to it.

I've used this setup several times with the vite/react plugin, usually like this:

/// <reference types="vitest" /> 
  
import { defineConfig } from 'vite' 
import react from '@vitejs/plugin-react' 
  
// https://vite.dev/config/ 
export default defineConfig({ 
  plugins: [react()], 
  
  test: { 
    globals: true, 
    environment: 'jsdom', 
    setupFiles: './src/test/setup.ts', 
    css: true, 
  }, 
}) 

However, with the reactRouter plugin I'm having the following issue, after adding test to vite.config.ts and running npx vitest:

 FAIL  app/welcome/welcome.test.tsx [ app/welcome/welcome.test.tsx ]
Error: React Router Vite plugin can't detect preamble. Something is wrong.
 ❯ app/welcome/welcome.tsx:9:15
      7|       <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
      8|         <header className="flex flex-col items-center gap-9">
      9|           <div className="w-[500px] max-w-[100vw] p-4">
       |               ^
     10|             <img
     11|               src={logoLight}

I'm getting the same error whether I use the config:

test: {
    environment: 'jsdom',
},

or

test: {
    browser: {
      enabled: true,
      name: 'chromium',
      provider: 'playwright',
    },
}

The error seems to originate from this plugin from the following line:

react-router/packages/react-router-dev/vite/plugin.ts

Line 1717 in 08e4f2f

"React Router Vite plugin can't detect preamble. Something is wrong."

Reproducer: https://github.com/akoskm/react-router-with-vitest

Does anyone know how can I fix this?

[ianjmacintosh]

tl;dr:
Update vite.config.ts with:

// ..
export default defineConfig({
  plugins: [!process.env.VITEST && reactRouter()],
  // ..
});

@akoskm I found this thread when I ran into this exact same issue.

Then I found this really good article about it:
https://akoskm.com/react-router-vitest-example/

Then I came back here to share a link to that article here aaaaand after looking at your username, it seems like that's not necessary!

Thanks for the help, looks like you figured it out :)

[akoskm]

Thanks lol. I figured this out and quickly made a blog post about it, but I haven't had the chance to link back to it from here. Thanks Ian! 🙂

[hanihusam]

Face the same issue. Thanks both @akoskm & @ianjmacintosh

In case if someone has the same issue as mine; running interaction test in Storybook UI and CLI, here is what I did,

const isStorybook = process.argv[1]?.includes('storybook')

export default defineConfig({
  plugins: [!isStorybook && !process.env.VITEST && reactRouter()],
  // ..
});