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',
})

[KevinHale-Bentley]

This is the one that somewhat worked for me. By somewhat, I mean that it solved one of my errors but not the other. It did not solve my "did not match the Name production" error, but it did solve my "Element type is invalid: expected a string (for built-in components) ..." error. The former may be a mocking issue. I'm fairly new to this.

[gabbozdev]

If you having this issue with vue3 use this plugin (anything else didn’t work for me)

[Maldonado-Miguel-bah]

@toomanychrises I had your exact issue. A component library we were using was using require. And although things would work in dev, it would fail in vitest.

And after finding your question, it finally led me to this answer.
So, I put this in my vitest-setup.ts file and added one for .png as well and now all my tests are passing.

const require = createRequire(import.meta.url)
require.extensions['.svg'] = (_, filename) => `module.exports = "${filename}"```

[sheremet-va]

I just wanted to mention that returning a string from there doesn't do anything (this was me not knowing how it works). If you want to set exports, you can do so like this:

require.extensions['.svg'] = (module, filename) => {
  module.exports = filename
}

You can also just set it to a noop if you don't rely on its exports:

require.extensions['.svg'] = () => {}