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.

This error means Vitest (via Vite) can’t parse a file that’s being imported during your test run. The file contains syntax that Vite’s parser doesn’t understand without the right configuration.

What causes this

Vite uses esbuild for transformation and has its own import analysis step. When it encounters a file it can’t parse, it throws this error. Common causes:

• A .js file contains JSX syntax (needs to be .jsx or .tsx)
• CSS or SCSS files are imported but not handled
• A dependency ships untranspiled code (CommonJS with unusual syntax, or non-standard extensions)
• SVG or other asset imports aren’t configured
• The Vitest config is missing transforms that your app config has

Fix 1: Check your Vitest config

Make sure your vitest.config.ts includes the same plugins and settings as your app’s Vite config:

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

If you’re using a framework like Next.js or SvelteKit, you may need a specific Vitest plugin that mirrors the framework’s transforms.

Fix 2: Handle CSS imports

By default, Vitest doesn’t process CSS. If your components import CSS files, you need to either enable CSS processing or mock them:

// vitest.config.ts
export default defineConfig({
  test: {
    css: true,  // Process CSS files
  },
});

Or mock CSS modules entirely:

// vitest.config.ts
export default defineConfig({
  test: {
    css: {
      modules: {
        classNameStrategy: 'non-scoped',
      },
    },
  },
});

Fix 3: Rename .js files that contain JSX

Vite won’t parse JSX in .js files by default. Either rename the files or configure esbuild:

# Rename the file
mv src/components/Button.js src/components/Button.jsx

Or force esbuild to treat .js files as JSX:

// vitest.config.ts
export default defineConfig({
  esbuild: {
    loader: 'jsx',
    include: /\.js$/,
  },
});

Fix 4: Handle problematic dependencies

Some npm packages ship code that Vite can’t parse. Force Vitest to pre-transform them:

// vitest.config.ts
export default defineConfig({
  test: {
    deps: {
      inline: ['problematic-package'],  // Force transform this package
    },
  },
});

You can also tell Vitest to process all dependencies in node_modules if multiple packages cause issues:

test: {
  server: {
    deps: {
      external: [/node_modules/],
      inline: ['specific-package-that-needs-transform'],
    },
  },
},

How to prevent it

• Use .tsx / .jsx extensions consistently for files containing JSX. Don’t rely on build tool magic to detect JSX in .js files.
• Keep your Vitest config in sync with your app’s Vite config. If you add a plugin to your app, add it to your test config too.
• When adding new dependencies, run your test suite to catch parse errors early — some packages ship ESM-only or untranspiled code that needs special handling.