Cannot find module './public/icons/icon.svg' or its corresponding type declarations, test fails only in Github Action

Question

My Next.js React app tests pass locally, but fail in Github Actions.

The next.config.js has this export to know about svg imports:

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

Then I've got some SVG icons, and I import them into the app like:

import StatusMessageErrorIcon from '../../../public/icons/Status-message-error.svg';

<StatusMessageErrorIcon fill="red" width="18" height="18" />

Everything works, the icon is shown.

Then I've got a test which renders the page with that icon, render(<Create />);

The test runs through locally, everything passes.

But running the test in a Github Action it fails with:

Test suite failed to run

src/MyForm.tsx:11:36 - error TS2307: Cannot find module '../../../public/icons/Status-message-error.svg' or its corresponding type declarations.

11 import StatusMessageErrorIcon from '../../../public/icons/Status-message-error.svg';

The Github Action is very basic:

steps:
  - uses: actions/checkout@v3

  - name: Use Node.js ${{ matrix.node-version }}
    uses: actions/setup-node@v3
    with:
      node-version: ${{ matrix.node-version }}
      cache: 'npm'

  - name: Install npm packages
    run: npm ci

  - name: Run tests
    run: npm run test

I don't get it, any ideas?

Answer 1

Right, In my case it had to do with Typescript and importing SVG into a .tsx file.

If anyone else has this problem, here's how to fix it.

Create a custom.d.ts file (at root level is fine) with the contents:

declare module '*.svg' {
  const content: any;
  export default content;
}

Then in tsconfig.json add this file to the include array like so:

{
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx",
        "custom.d.ts"
    ]
}