Module does not found in webpack (development mode)

Question

I get the following error in my web browser console when I load my webpage:

Uncaught TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../".

I am using lit-html and it is inside node_modules directory.

Here my tsconfig.json

{
  "compilerOptions": {
    "outDir": "static/js",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
    "moduleResolution": "node"
  },
  "compileOnSave": true,
  "include": ["src"]
}

Here my webpack.config.js

const path = require("path");
// const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

var config = {
    entry: {
        main: path.join(__dirname, "src/index.ts"),
    },
    output: {
        filename: "index.js",
        path: path.join(__dirname, "static/js"),
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
                options: {
                    configFile: path.resolve(__dirname, "tsconfig.json"),
                },
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        // modules: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules"), "node_modules"],
        // plugins: [
        //  new TsconfigPathsPlugin({
        //      configFile: path.join(__dirname, "tsconfig.json"),
        //  }),
        // ],
    },
};

module.exports = (env, argv) => {
    if (argv.mode === "development") {
        // config.devtool = "source-map";
        config.devtool = "inline-source-map";
        config.devServer = {
            contentBase: path.join(__dirname, "static"),
            compress: true,
            headers: { "Access-Control-Allow-Origin": "*" },
            port: 9000,
            overlay: true,
        };
    }

    if (argv.mode === "production") {
        //...
    }

    return config;
};

I run webpack in development mode like this: webpack-dev-server --mode development --open And I get the error, but when I run webpack in production mode it is works: webpack --mode production

Answer 1

It works adding publicPath: "/js/", in ouput section:

const path = require("path");
// const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

var config = {
    entry: {
        main: path.join(__dirname, "src/index.ts"),
    },
    output: {
        filename: "index.js",
        path: path.join(__dirname, "static/js"),
        publicPath: "/js/",
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
                options: {
                    configFile: path.resolve(__dirname, "tsconfig.json"),
                },
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
};