fix(types): add missing SVG module declarations to resolve compiler errors#1212
fix(types): add missing SVG module declarations to resolve compiler errors#1212subbareddypalagiri wants to merge 1 commit into
Conversation
📝 WalkthroughWalkthroughA new TypeScript ambient module declaration file ChangesSVG Type Declaration
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: one or more packages not found in the registry. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/types/svg.d.ts`:
- Line 2: The SVG module declaration is currently widening imported SVGs to any,
which removes type safety for consumers like footer and self-hosting page
components. Update the module declaration in svg.d.ts to use the concrete SVG
import type that matches how the assets are actually consumed, and keep the
exported shape aligned with those usages so imports remain strongly typed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| @@ -0,0 +1,4 @@ | |||
| declare module "*.svg" { | |||
| const content: any; | |||
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the SVG type declaration and nearby files/usages.
git ls-files 'src/types/svg.d.ts' 'src/**/*.{ts,tsx}' 'messages/*.json' | sed -n '1,200p'
printf '\n--- src/types/svg.d.ts ---\n'
cat -n src/types/svg.d.ts
printf '\n--- SVG import usages ---\n'
rg -n --glob 'src/**/*.{ts,tsx}' --glob '!**/*.d.ts' --glob '!**/node_modules/**' '\.svg(["'\'']|$)|from [^;]*\.svg|import .*\.svg' src || trueRepository: f/prompts.chat
Length of output: 5555
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find any file patterns or config suggesting SVG imports are treated specially.
rg -n --glob 'src/**/*.{ts,tsx,js,jsx,mts,cts}' --glob '*.d.ts' --glob 'next.config.*' --glob 'tsconfig*.json' \
'StaticImageData|declare module .*\.svg|svgRuntime|`@svgr`|svgr|next/image|Image ' . || trueRepository: f/prompts.chat
Length of output: 8259
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Read the relevant declaration file with line numbers if present.
if [ -f src/types/svg.d.ts ]; then
cat -n src/types/svg.d.ts
fiRepository: f/prompts.chat
Length of output: 255
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect package/tooling versions for Next.js/TypeScript/SVG handling clues.
if [ -f package.json ]; then
cat package.json
fiRepository: f/prompts.chat
Length of output: 4117
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Probe whether StaticImageData is exported/imported anywhere in the repo.
rg -n --glob 'src/**/*.{ts,tsx,d.ts}' 'StaticImageData' . || trueRepository: f/prompts.chat
Length of output: 152
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- src/types/svg.d.ts ---'
if [ -f src/types/svg.d.ts ]; then
cat -n src/types/svg.d.ts
else
echo 'missing'
fi
echo
echo '--- SVG-related config/usages ---'
rg -n --glob 'src/**/*.{ts,tsx,d.ts,js,jsx,mts,cts}' --glob 'next.config.*' --glob 'tsconfig*.json' \
'declare module .*\.svg|StaticImageData|`@svgr`|svgr|dangerouslyAllowSVG|next/image|from .*\.svg|import .*\.svg' . || trueRepository: f/prompts.chat
Length of output: 1822
🌐 Web query:
Next.js SVG import type StaticImageData string module declaration next/image svg default export
💡 Result:
In Next.js, importing an SVG file behaves differently depending on your configuration [1][2]. By default, Next.js does not treat SVG files as StaticImageData objects (which are reserved for formats like PNG, JPG, or WebP) [3][1]. Instead, standard SVG imports often require third-party tools like @svgr/webpack to function as React components or as string paths [4][1][5]. If you are encountering a TypeScript error expecting a string but receiving a StaticImageData object (or vice versa), it is usually due to conflicting type declarations or custom webpack/turbopack configurations [3][6][7]. To use SVGs in Next.js, follow one of these common approaches: 1. Use next/image for static assets Place your SVG in the public directory and reference it by its string path [1]. 
2. Use @svgr/webpack to import as a React Component If you want to import an SVG and use it as a component, configure your next.config.js/ts to use @svgr/webpack [8][5]. // next.config.js module.exports = { webpack(config) { config.module.rules.push({ test: /.svg$/i, issuer: /.[jt]sx?$/, use: ['@svgr/webpack'], }); return config; }, }; 3. Handle Dual-Purpose Imports (Component + URL) To use an SVG both as a React component and as an image source (for next/image), you can use resource queries in your webpack configuration [6]. // next.config.js module.exports = { webpack(config) { config.module.rules.push({ test: /.svg$/i, issuer: /.[jt]sx?$/, resourceQuery: { not: [/url/] }, use: ['@svgr/webpack'], }); config.module.rules.push({ test: /.svg$/i, resourceQuery: /url/, type: 'asset/resource', }); return config; }, }; // Typescript declaration (e.g., in next-env.d.ts or svg.d.ts) declare module ".svg?url" { const src: string; export default src; } declare module ".svg" { import React = require("react"); const ReactComponent: React.FC<React.SVGProps>; export default ReactComponent; } This allows you to import the component version normally (import Logo from './logo.svg') or the string path version by appending a query (import logoUrl from './logo.svg?url') [6].
Citations:
- 1: https://blog.logrocket.com/import-svgs-next-js-apps/
- 2: https://dev.to/vitalets/turbopack-a-better-way-to-inline-svg-in-nextjs-16-36em
- 3: https://www.edureka.co/community/294937/why-staticimagedata-not-assignable-type-string-typescript
- 4: https://stackoverflow.com/questions/74606722/how-to-use-svg-in-nextjs-13-with-app-directory
- 5: https://medium.com/@pkuzmanovski/importing-an-svg-using-next-js-14-5bf144030027
- 6: SVG images with <Image>, and as React components vercel/next.js#30472
- 7: https://www.duncanleung.com/blog/next-js-typescript-svg-any-module-declaration/
- 8: How to Handle SVG to use as ReactComponent as well as to pass on img tag or <Image /> vercel/next.js#52690
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- next.config.ts ---'
if [ -f next.config.ts ]; then
cat -n next.config.ts
fi
echo
echo '--- any other svg declarations ---'
rg -n --glob '*.d.ts' 'declare module ".*\.svg' . || true
echo
echo '--- tsconfig files ---'
git ls-files 'tsconfig*.json' | sed -n '1,50p'
for f in $(git ls-files 'tsconfig*.json'); do
echo
echo "--- $f ---"
cat -n "$f"
doneRepository: f/prompts.chat
Length of output: 4948
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- src/types/svg.d.ts context ---'
cat -n src/types/svg.d.ts
echo
echo '--- imports of DeepWikiIcon / Context7Icon ---'
rg -n 'DeepWikiIcon|Context7Icon' src || trueRepository: f/prompts.chat
Length of output: 1182
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo '--- next.config.ts ---'
cat -n next.config.tsRepository: f/prompts.chat
Length of output: 3883
Avoid any in src/types/svg.d.ts
The SVG module declaration currently widens every .svg import to any, which weakens strict typing across components like src/components/layout/footer.tsx and src/app/docs/self-hosting/page.tsx. Use the concrete import type that matches the actual SVG usage instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/types/svg.d.ts` at line 2, The SVG module declaration is currently
widening imported SVGs to any, which removes type safety for consumers like
footer and self-hosting page components. Update the module declaration in
svg.d.ts to use the concrete SVG import type that matches how the assets are
actually consumed, and keep the exported shape aligned with those usages so
imports remain strongly typed.
Source: Coding guidelines
1 participant
Description
When running the strict TypeScript compiler (
npx tsc --noEmit), the build pipeline throwsTS2307: Cannot find moduleandTS2322type assignability errors whenever.svgfiles are imported (e.g.,src/components/layout/footer.tsx,src/app/docs/self-hosting/page.tsx). Next.js requires explicit module declarations for static assets like SVGs to prevent compiler crashes during strict validation.The Fix
src/types/svg.d.tsmodule declaration file.*.svgto export asany, satisfying the Next.js<Image src={...} />component requirements.tsconfig.jsoncorrectly picks up the new declarations via the existing**/*.tsinclude directive.Type of Change
Please don't edit
prompts.csvdirectly!Instead, visit prompts.chat and use the prompt editor to add your new prompt.
Added a global TypeScript module declaration for
*.svgfiles so SVG imports are recognized during strict type checking.This resolves the compiler errors caused by importing SVGs in components/pages that use them with Next.js image handling, without requiring changes to existing
tsconfig.jsonincludes.