ts-nextjs-tailwind-starter icon indicating copy to clipboard operation
ts-nextjs-tailwind-starter copied to clipboard

SVG type

Open matheusdamiao opened this issue 1 year ago • 1 comments

Hello! I was trying to first commit and ran into this issue during Typecheck Github job was being checked. Locally I had ran yarn typecheck and it was not throwing any error. I'm not sure how I can fix that error without modifying the next.config file. Any suggestions on that?

thanks in advance!

(as it's a public repo, https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475)

Run yarn typecheck
yarn run v1.22.19

$ tsc --noEmit --incremental false

Error: src/app/page.tsx(1[6](https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475/job/17841913484#step:6:7),18): error TS230[7](https://github.com/matheusdamiao/mcd-site/actions/runs/6568072475/job/17841913484#step:6:8): Cannot find module '~/svg/Logo.svg' or its corresponding type declarations.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 2.

matheusdamiao avatar Oct 19 '23 01:10 matheusdamiao

It's not the same error exactly, but I got it worked by adding the following svg type, as suggested in this issue here.

declare module '*.svg' {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const content: string;

  export { ReactComponent };
  export default content;
}

The only problem I have with this solution is that now I can't pass any class to the svg component. Previously there was a tailwind class passed to it, so I had to remove it to make it work.

matheusdamiao avatar Oct 19 '23 13:10 matheusdamiao