Webpack image can't find module

Question

I am trying to export my images by doing so:

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Here is my folder structure:

And here is my index.ts file:

import {css} from 'lit-element';
import ErrorIcon from './assets/icons/error.svg';
export const iconStyles = css`
  .icon-error {
    background-image : src("${ErrorIcon.src}");
  }
  .icon-warning {
     background-image : src("/assets/icons/warning.svg");
  }`;

When I run build I get the following error:

TS2307: Cannot find module './assets/icons/error.svg' or its corresponding type declarations.

What have I done wrong?

Answer 1

i figured out the issue apprently in typescript you have to add a file that looks like this:

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

Source

Answer 2

Give it a try:

background-image : url("${ErrorIcon.src}");