ts-nextjs-tailwind-starter
ts-nextjs-tailwind-starter copied to clipboard
SVG type
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.
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.