I have a pretty simple Webpack + TypeScript setup and am trying to import svgs. I'm using svg-sprite-loader and it works well if I require() my svgs like the following:

require('./assets/alert.svg')

--

However, I'd prefer to use the following:

import alert from './assets/alert.svg'

With that, I get the following error:

TS2307: Cannot find module './assets/alert.svg'.

I have a custom.d.ts file in my project root (after reading this: ). It looks like this:

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

My tsconfig looks like:

{
  "pilerOptions": {
    "module": "monjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "**/*.spec.ts"
  ]
}

And finally, my webpack set up includes:

 module: {
   rules: [
       {
           test: /\.ts$/,
           use: `awesome-typescript-loader`
       },
       {
           test: /\.html$/,
           loader: 'html-loader'
       },
       {
           test: /\.svg$/,
           loader: 'svg-sprite-loader'
       }
   ]
 }

I'm trying to understand how that custom.d.ts file es into play. Is there something I need to add in my tsconfig?

Also, for versions, I'm using:

• Webpack @ 2.5.0
• TypeScript @ 2.4.0
• svg-sprite-loader @ 3.6.2
• awesome-typescript-loader @ 3.1.2

I have a pretty simple Webpack + TypeScript setup and am trying to import svgs. I'm using svg-sprite-loader and it works well if I require() my svgs like the following:

require('./assets/alert.svg')

--

However, I'd prefer to use the following:

import alert from './assets/alert.svg'

With that, I get the following error:

TS2307: Cannot find module './assets/alert.svg'.

I have a custom.d.ts file in my project root (after reading this: https://webpack.js/guides/typescript/#importing-other-assets). It looks like this:

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

My tsconfig looks like:

{
  "pilerOptions": {
    "module": "monjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "**/*.spec.ts"
  ]
}

And finally, my webpack set up includes:

 module: {
   rules: [
       {
           test: /\.ts$/,
           use: `awesome-typescript-loader`
       },
       {
           test: /\.html$/,
           loader: 'html-loader'
       },
       {
           test: /\.svg$/,
           loader: 'svg-sprite-loader'
       }
   ]
 }

I'm trying to understand how that custom.d.ts file es into play. Is there something I need to add in my tsconfig?

Also, for versions, I'm using:

• Webpack @ 2.5.0
• TypeScript @ 2.4.0
• svg-sprite-loader @ 3.6.2
• awesome-typescript-loader @ 3.1.2

• javascript
• typescript
• webpack

• Is there anything else in your custom.d.ts? – Aaron Beall Commented Feb 20, 2018 at 20:44
• Nope, just that! – amlyhamm Commented Feb 20, 2018 at 20:44
• Seems like this setup should work. What pile or webpack error do you get after adding custom.d.ts? – Aaron Beall Commented Feb 20, 2018 at 20:44
• TS2307: Cannot find module './assets/alert.svg' (from the file that has the import statement) – amlyhamm Commented Feb 20, 2018 at 20:46
• Do you get that if you run tsc directly or only through webpack? – Aaron Beall Commented Feb 20, 2018 at 20:46

2 Answers 2

Try adding

"files": [ 
  "custom.d.ts" 
]  

to your tsconfig.json

You can specify a typeRoot in your tsconfig.json pointing to the location of custom.d.ts.