CODEWITHSUNDEEP
typescriptwebpack
Xkoder FX
Xkoder FX

Reputation: 61

Why typescript loader cause to errors in html webpack plugin?

I have the following webpack config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    context: path.resolve(__dirname, "src"),
    entry: "./index.ts",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: [/node_modules/],
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "index.html",
        }),
    ],
};

and every time when I run webpack I receive these errors however, the typescript file compiles successfully

[tsl] ERROR in C:\Users\Koder\Desktop\programingLS\Education\Topics\Web\Lessons\TypeScript\node_modules\html-webpack-plugin\index.js(16,19)
      TS2306: File 'C:\Users\Koder\Desktop\programingLS\Education\Topics\Web\Lessons\TypeScript\node_modules\lodash\lodash.js' is not a module.

packages: "devDependencies": { "html-webpack-plugin": "^4.3.0", "lodash": "^4.17.20", "ts-loader": "^8.0.2", "typescript": "^3.9.7", "webpack": "^4.44.1", "webpack-cli": "^3.3.12" }

Upvotes: 2

Views: 654

Answers (1)

Xkoder FX
Xkoder FX

Reputation: 61

I fixed the problem with the following command:

npm install --save @types/html-webpack-plugin

Upvotes: 4

Related Questions