CODEWITHSUNDEEP
reactjstypescriptsvgreact-typescriptreact-tsx
Amruta
Amruta

Reputation: 1575

Cannot find module '../Theme/Icons/' or its corresponding type declarations.ts(2307)

I have a new project in React-typescript, where I'm given a repo. The folder structure is as follows:

parentDirectory
└───src   
│    │   Components
│    │   Store
│    │   Theme
|         │   Icons
│         │   Styles

I have some svg and png icons in the Icons folder. I'm trying to import them into files inside the Components folder, but I'm getting the error:

Cannot find module '../Theme/Icons/' or its corresponding type declarations.ts(2307)

My import statement is as follows. I'm not really sure if this is the correct way to do it either:

import  { svgComponent as Icon } from '../Theme/Icons/filename.svg'

tsconfig.json is as below:

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "validationApp"]
}

When I use the import

import  Icon from '../Theme/Icons/filename.svg'

I get the following error:

(commonjs plugin) Error: ENOENT: no such file or directory, open 'C:\Users\my-app\src\Theme\Icons\filename.svg'

I'm used to storing images in the public folder at the root and then importing. This file structure is new to me and I'm not allowed to change it. I will edit the question and post anything else if needed. Any help on this is appreciated. Thanks in advance.

Upvotes: 1

Views: 1185

Answers (1)

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10658

Assuming you're using CreateReactApp and don't have access to update your webpack.config, this is probably your best bet.

In your .d.ts file add this:

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

If you don't have a .d.ts file already setup you can create a new one e.g. custom.d.ts in your src directory.

Then in your tsconfig.json just make sure you have this option set: "include": [""src/custom.d.ts"]

Upvotes: 1

Related Questions