I use vitest to test Next.js app following the official example here.

I get error saying 'InvalidCharacterError: "../../pany-logo.svg" did not match the Name production'. Finally I figured out that the image was because of svg imported as ponents. When I removed svg imports as ponents, it worked fine.

I am using @svgr/webpack to load svg as ponents in my Next.js 13 app. I tried adding vite-plugin-svgr to vitest.config.ts but it does not work.

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import svgr from "vite-plugin-svgr";

// /config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
  test: {
    environment: "jsdom",
  },
});

Any way I can fix this issue?

I use vitest to test Next.js app following the official example here.

I get error saying 'InvalidCharacterError: "../../pany-logo.svg" did not match the Name production'. Finally I figured out that the image was because of svg imported as ponents. When I removed svg imports as ponents, it worked fine.

I am using @svgr/webpack to load svg as ponents in my Next.js 13 app. I tried adding vite-plugin-svgr to vitest.config.ts but it does not work.

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
  test: {
    environment: "jsdom",
  },
});

Any way I can fix this issue?

• javascript
• node.js
• unit-testing
• next.js
• vitest

1 Answer 1

I ran into the same issue, I also use Next13 I finally fixed it by using vite-plugin-magical-svg with a target react into my vite.config.js

plugins: [graphql(), magicalSvg({ target: 'react' })]

Hope it will wirk for you !