Webpack + Typescript, impossible to create own .d.ts file for npm package

1k views Asked by At

I've just spent a few hours trying to get webpack to recognize a .d.ts file I made about a small module I'd like to use which doesn't have a @types package (png-to-jpeg, an imagemin plugin).

The import is as basic as it gets :

import pngToJpeg from "png-to-jpeg";

Here is the src/typings/png-to-jpeg/index.d.ts file:

declare module "png-to-jpeg" {
    export default import("imagemin").Plugin;
}

My IDE (VSCode) seems happy with it, it removed the error as soon as I added this file, but webpack refuses to recognize it and I had to fallback to a require to get it to work. Here's my webpack config:

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable no-undef */
const path = require("path");
const dotenv = require("dotenv");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
const NodemonPlugin = require("nodemon-webpack-plugin");

dotenv.config();



module.exports = env => {
    const {
        NODE_ENV = typeof env.NODE_ENV === "string" ? process.env.NODE_ENV : "production"
    } = env;
    return {
        entry: "./index.ts",
        mode: NODE_ENV,
        target: "node",
        output: {
            path: path.resolve(__dirname, "build"),
            filename: "index.js"
        },
        resolve: {
            extensions: [".ts", ".js", ".d.ts"],
            plugins: [new TsconfigPathsPlugin({ })],
        },
        watch: NODE_ENV === "development",
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: [
                        "ts-loader",
                    ]
                }
            ]
        },
        externals: [nodeExternals()],
        plugins: [
            new NodemonPlugin(),
        ],
    };
};

Which is started using webpack --env NODE_ENV=development

If you have any idea, that'd be great, thanks

0

There are 0 answers