Vitest error when import svg

[toomanychrises]

I'm getting a similar error to #1766 where it seems like it's only happening when import a package that is a component (in bit) that's compiled to commonjs. The error doesn't happen when this identical component is local instead of being a package.

Sorry if this is a rookie question, but I need to know what to do, whether it's a matter of changing how this component is packaged/build, or how we are importing it into the vite repo, or how I'm configuring vitest to use it... this error does not occur when running the app, only in vitest

svg-list.js (in component)

// comment here, errors on the next line
import SvgFile from './file-name.svg';

export { SvgFile };

vite.config.js:

/// <reference types="vitest" />
/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    base: `/path/folder/`,
    plugins: [react(), svgr()],
    server: {
      port: 7777,
    },
    resolve: {
      alias: [
        {
          find: /^~(.*)$/,
          replacement: '$1',
        },
      ],
    },
    test: {
      coverage: {
        provider: 'istanbul',
      },
      globals: true,
      environment: 'jsdom',
      setupFiles: './src/setupTests.ts',
      css: true,
    },
    define: {
      // window needs to be defined for production for the dialogs but breaks dev
      ...(command === 'build' ? {} : { global: 'window' }),
    },
  };
});

which obviously leads to an SVG asset that other DS components use. Any workaround for vitest on this? I've tried a fewtest.alias that points it to a fileMock that exports a span and plugins replacements, but I'm not sure I have to correct syntax. Any advice?

[hi-ogawa]

I'm not familiar with bit, but normally the files in node_modules aren't processed/transformed by Vitest, so import is done by plain NodeJs and thus syntax error.

To force Vitest to treat svg-list.js like your source files, which will go through Vite transform pipeline, I think you can probably put @hallmark/web.core.display.inline-svg in server.deps.inline config https://vitest.dev/config/#server-deps-inline

[sheremet-va]

Vitest uses this file because the package specified it in package.json. You can use test.alias config option to redirect it to a specific file

[toomanychrises]

@sheremet-va is this the same issue as #1910? I'm still having trouble determining if an alias is working. I see how the package.json is pointing to the dist/index.js, so I've either got to redirect this to like a mock.js file with an empty span or get vitest to use the source files in the package.

test: {
  coverage: {
    provider: 'istanbul',
  },
  typecheck: {
    allowJs: true
  },
  server: {
    deps: {
      web: {
        transformAssets: true
      },
      fallbackCJS: true,
      transformAssets: false,
      inline: [
        "@compoentPath.inline-svg",
        "compoentPath.inline-svg/svg-list.js"
      ]
    }
  },
  alias: [
    {
      find: 'compoentPath.inline-svg',
      replacement: './src/svgTransform.js',
    }
  ],

and that svgTransform file looks like module.exports = '<span>';

[toomanychrises]

@sheremet-va none of the settings in the vitest docs seem to work for me. I've tried the following:

      server: {
        deps: {
          inline: [
            '@path-to.inline-svg',
          ]
        }
      },

and I've tried

      alias: [
        {
          find: 'path-to.inline-svg',
          replacement: './src/svgTransform.js',
        }
      ],

I really want to use vitest, but if i can't get past this, I know how to get around this in Jest using moduleNameMapper. Is there some kind of workaround for this? I cannot find a solution or an example online.

[hi-ogawa]

It's difficult for us to provide more precise suggestions without a reproduction.
It looks like the issue is specific to the case where svg file is in node_modules/..., but I think you can simulate that by using "some-dep": "file:./local-some-dep" (cf. vitejs/vite#16005 (reply in thread), https://stackblitz.com/edit/github-vorhme?file=package.json)

[asos-VasilisKortsimelidis]

@toomanychrises sorry to jump in but I tried to resolve a similar issue I had with importing an svg from a library (component library we use).

Seems you have a different error than me, have you tried mocking the library with vi.mock?

For what is worth my error was

InvalidCharacterError: "/node_modules/library/chevron-right.svg" did not match the Name production

when running vitest and I was able to fix by adding vite-plugin-svgr with the particular options you see below in my vitest.config.js

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

export default defineConfig({
  plugins: [
    react(),
    svgr({
      svgrOptions: {
        ref: true,
        svgo: false,
        titleProp: true,
      },
      include: "**/*.svg",
    }),
  ],

[Spartak90]

I am having the exact same issue. Did you manage to solve it?

[Ampit]

I got it to work using these props for svgr

svgr({
  svgrOptions: {
    ref: true,
    svgo: false,
    titleProp: true,
    exportType: 'named',
  },
  include: '**/*.svg',
})