Webpack cannot find image when imported - module not found - webpack-dev-server

Question

I am using webpack dev server to serve up a simple Typescript app. In it, I am trying to load an image dynamically in the Typescript like so:
import img from "./image.png";
const myImg = new Image();
myImg.addEventListener("load", ...);
myImg.src = img;
The HTML, TS, and image files are all sitting right next to each other, so I use the relative path to grab the image. However, webpack complains saying "./image.png" is not a module. I am almost certain it must be a configuration issue. Here are the relevant files (with some values changed to generic values):
package.json
{
"name": "my_project",
"version": "0.1.0",
"description": "My project",
"main": "index.js",
"scripts": {
"build-prod": "webpack --config webpack.prod.js",
"start-dev": "webpack-dev-server --config webpack.dev.js"
},
"author": "Cyle Ven Dawson",
"license": "MIT",
"private": true,
"devDependencies": {
"awesome-typescript-loader": "^5.2.1",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"tslint": "^5.11.0",
"typescript": "^3.0.3",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8",
"webpack-merge": "^4.1.4"
}
}
webpack.dev.js
const merge = require("webpack-merge");
const commonConfig = require("./webpack.common");
module.exports = merge(
commonConfig,
{
"devServer" : {
"allowedHosts": [
"dev.example.com"
],
"disableHostCheck": true,
"host": "1.2.3.4",
"port": 12345,
"public": "dev.example.com:12345"
},
"mode": "development"
}
);
webpack.common.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const TsConfigPathsPlugin = require("awesome-typescript-loader").TsConfigPathsPlugin;
module.exports = {
"entry": "./src/index.ts",
"module": {
"rules": [
{
"include": /src/,
"test": /\.ts$/,
"use": {
"loader": "awesome-typescript-loader"
}
},
{
"include": /src/,
"test": /\.scss$/,
"use": [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
"include": /src/,
"test": /\.(png|svg|jpg|gif)$/,
"use": [
'file-loader'
]
}
]
},
"output": {
"publicPath": "/"
},
"plugins": [
new HtmlWebPackPlugin({
"filename": "./index.html",
"template": "./src/index.html"
})
],
"resolve": {
"extensions": [".ts", ".js"],
"plugins": [
new TsConfigPathsPlugin({
tsconfig: __dirname + '/tsconfig.json',
compiler: 'typescript'
})
]
},
};

Answer 1

I leave this here in case anyone comes here from google.
You must tell typescript that the png image is a module.
The way you do this is inside of the assets folder or where ever you are storing you images make a file called index.d.ts
Inside this file put the following:
declare module '*.png' {
const value: any
export = value;
}
This will give you the ability to import a png image as a module and make Typescript happy. I believe this will work for .wav, .gif, .jpg ect. You would just need to declare each one in the index.d.ts file.
I hope this helps some one.