HMR issues

[blackshadev]

First of, great project, hands down I has the least issues with setting this up as opposed to webpack-dev-server / webpack-serve. Both failed at some point when using things like HTTPS and multiple windows.
The only two issues I had was the me understanding that I needed to add the webpack-plugin-serve client script to my entry points. And the fact that the default was to use IPv6 while this was disabled on my machine, so the page refused to load etc. After I set the host to localhost and added the client scripts to the entrypoints it worked like a charm. Very nice. The added progress bar is such a nice touch, I never knew I missed it until now.

I do have some questions however:
One thing that absolutely never worked for me was HMR and I always ended up using liveReload, So I thought, let's have a try with this plugin. After I turned liveReload off and applied a change to my sources the an error message in the browser's console, I will post it below along with the webpack.config.js etc. Do mind that I didn't change a thing in the monaco editor, so I think it is just the behavior of the manaco webpack plugin, but I am not sure.

One other thing is that the async errors from ATL (Awesome-Typescript-Loader) CheckerPlugin do not get shown in a status window, I don't know if that is the expected behavior or not, but it would be nice if they did. Maybe they do when HMR works.

The last thing is probably a bug. When setting HMR to false and liveReload to true I will get an error message about __webpack_hash__ not defined when loading the page. I will add the full error below.

webpack.config.js
Note: isDev and therefor isDevServer are both true

var webpack = require("webpack");
const path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var atl = require("awesome-typescript-loader");
let CircularDependencyPlugin = require("circular-dependency-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const fs = require("fs");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const GitRevisionPlugin = require("git-revision-webpack-plugin");
const { WebpackPluginServe: Serve } = require("webpack-plugin-serve");
var gitRevisionPlugin = new GitRevisionPlugin();

var extractCss = new MiniCssExtractPlugin({
    filename: "[name].css",
});

let mode = process.env.NODE_ENV || "development";
const isDev = mode === "development";
const isDevServer = isDev && !process.env.NO_SERVE;

console.log(!isDevServer ? "[Webpack.config.js] IS_DEV_SERVER" : "[Webpack.config.js] COMPILE");
const authUrl = process.env.AUTH_URL || (isDev ? "https://domain.com/auth/" : "/auth/");
console.log("[Webpack.config.js] AUTH_URL: " + authUrl);

const options = {
    https: {
        key: fs.readFileSync(__dirname + "/ssl/localhost.key"),
        cert: fs.readFileSync(__dirname + "/ssl/localhost.crt"),
        ca: fs.readFileSync(__dirname + "/ssl/ca.crt"),
    },
    host: "localhost",
    progress: "minimal",
    port: 8080,
    hmr: true,
    liveReload: false,
};

const entryPoints = {
    gof: ["./src/app.ts"],
    style: ["./style/index.js"],
};

const plugins = [
    new webpack.DefinePlugin({
        AUTH_URL: JSON.stringify(authUrl),
        VERSION: JSON.stringify(gitRevisionPlugin.version()),
        COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
        BRANCH: JSON.stringify(gitRevisionPlugin.branch()),
    }),
    extractCss,
    new atl.CheckerPlugin(),
    new CircularDependencyPlugin({
        // exclude detection of files based on a RegExp
        exclude: /a\.js|node_modules/,
        // add errors to webpack instead of warnings
        failOnError: true,
    }),
    new MonacoWebpackPlugin(),
    // new webpack.optimize.UglifyJsPlugin({ output: {comments: false} }),
    // new webpack.optimize.OccurenceOrderPlugin()
];

if (isDevServer) {
    entryPoints.gof.push("webpack-plugin-serve/client");
    entryPoints.style.push("webpack-plugin-serve/client");

    plugins.push(new Serve(options));
}
module.exports = {
    mode: isDevServer ? "development" : "production",
    entry: entryPoints,
    target: "web",
    devtool: isDevServer ? "cheap-module-eval-source-map" : undefined,
    output: {
        publicPath: "/dist/",
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
    },
    performance: { hints: false },
    watch: isDevServer,
    resolve: {
        extensions: [".ts", ".js", ".css", ".less"],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                include: [path.resolve(__dirname, "src")],
                loader: "awesome-typescript-loader",
                options: {
                    useCache: true,
                    usePrecompiledFiles: true,
                    forceIsolatedModules: true,
                    reportFiles: ["src/**/*.ts"],
                },
            },
            {
                test: /\.less$/,
                include: [path.resolve(__dirname, "style")],
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: "less-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpg|cur|woff|woff2|ttf|svg|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: "100",
                        name: "[path][name].[ext]",
                    },
                },
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    optimization: !isDevServer
        ? {
              minimizer: [
                  new UglifyJsPlugin({
                      cache: true,
                      parallel: true,
                      uglifyOptions: {
                          ecma: 6,
                          mangle: true,
                      },
                  }),
              ],
          }
        : undefined,
    plugins: plugins,
};

Error message for HMR monaco issue

Uncaught (in promise) Error: Aborted because ./node_modules/monaco-editor/esm/vs/basic-languages/monaco.contribution.js is not accepted
Update propagation: ./node_modules/monaco-editor/esm/vs/basic-languages/monaco.contribution.js -> ./node_modules/monaco-editor/esm/vs/editor/editor.main.js -> ./include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js -> ./src/designers/customEditors/functionEditor.ts -> ./src/designers sync recursive \.ts$ -> ./src/imports.ts -> ./src/app.ts -> 0
    at hotApply (gof.js:506)
    at replace (hmr.js?797c:60)
hotApply @ gof.js:506
replace @ hmr.js?797c:60
async function (async)
replace @ hmr.js?797c:47
socket.addEventListener @ client.js?a662:67

Error message for HMR : false, liveReload: true

Uncaught ReferenceError: __webpack_hash__ is not defined
    at eval (client.js?1382:19)
    at eval (client.js?1382:20)
    at Object../node_modules/webpack-plugin-serve/client.js (gof.js:15512)
    at __webpack_require__ (gof.js:64)
    at Object.0 (gof.js:18368)
    at __webpack_require__ (gof.js:64)
    at gof.js:197
    at gof.js:200
(anonymous) @ client.js?1382:19
(anonymous) @ client.js?1382:20
./node_modules/webpack-plugin-serve/client.js @ gof.js:15512
__webpack_require__ @ gof.js:64
0 @ gof.js:18368
__webpack_require__ @ gof.js:64
(anonymous) @ gof.js:197
(anonymous) @ gof.js:200

[shellscape]

Thanks for the kind words 😄

And thanks for all the info. It looks like you've got a rather involved configuration going there, and with some components that I've never used/seen before. Things like __webpack_hash__ being undefined are super unusual, as that should always be present. Coupled with the monaco error you provided, that makes me think that some components are misbehaving and modifying the webpack build in an unusual or atypical way. Unfortunately I think this is going to be a situation in which we need a minimal reproduction in a repository that we can work with to triage all of the issues. If you can put one together, we can probably work through these issues and get your setup working right. I'm not sure how we would go about fixing this for you without one though.

[blackshadev]

Hi Shellscape, thanks for you quick reply and sorry for my late reply.

Yeah I can understand why you would want a more .. minimal reproduction than my config. Unfortunately since this is a work related project I will not be able to make the repro in the near future. Currently we use liveReload by setting liveReload to true and not setting HMR at all, works fine for me. When / if I investigate this further I will let you guys know either by replying to this issue (if it still exists) or creating a new one.

Thanks!

[matheus1lva]

Sounds good!
You can reply to this one and we can also reopen in case you find a reproduction!

[blackshadev]

Hi guys, So I made a more minimal example because I needed some testing on a smaller set.
Find all files below. I do still use the awesome-typescript-loader., but the rest is stripped out.

When changing the test.ts I get the following error:

Uncaught (in promise) Error: Aborted because ./src/core/virtual-tree/test.ts is not accepted
Update propagation: ./src/core/virtual-tree/test.ts -> 1
    at hotApply (test.js:476)
    at replace (VM172 hmr.js:60)
hotApply	@	test.js:476
replace	@	hmr.js?797c:60
async function (async)		
replace	@	hmr.js?797c:47
socket.addEventListener	@	client.js?a662:67

Do note that this test is written as part of a bigger source tree , I hope this doesn't matter. but this is what I ran into with this smaller subset that I needed anyway. Hopefully this provides some insights to you guys.

"./src/core/virtual-tree/test.ts

document.onloadend = startTree;
console.log("here");

function startTree() {
    console.log("Should start tree 23");
}

webpack.config.js

const path = require("path");
const { WebpackPluginServe: Serve } = require("webpack-plugin-serve");

module.exports = {
    mode: "development",
    entry: {
        test: ["./src/core/virtual-tree/test.ts", "webpack-plugin-serve/client"],
    },
    target: "web",
    output: {
        publicPath: "/dist/",
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
    },
    performance: { hints: false },
    watch: true,
    resolve: {
        extensions: [".ts", ".js"],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                include: [path.resolve(__dirname, "src")],
                loader: "awesome-typescript-loader",
                options: {
                },
            },
        ],
    },
    plugins: [
        new Serve({
            host: "localhost",
            progress: "minimal",
            port: 8080,
        }),
    ],
};

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "esnext",
        "watch": true,
        "outDir": "./build/",
        "forceConsistentCasingInFileNames": true,
        "baseUrl": "./src/",
        "typeRoots": ["./node_modules/@types/"]
    },
    "include": ["./src/**/*.ts", "./typings/**/*.d.ts"]
}

[shellscape]

@blackshadev without seeing the larger project I can't tell a lot of key information. Have you used module.hot.accept somewhere as outlined here: https://webpack.js.org/guides/hot-module-replacement/ ? Also, in which environment are you getting the error output? The system terminal/console, the browser console, etc.

I'm afraid to diagnose this further we're going to need a minimal reproduction in a separate repo that we can duplicate the same conditions under. When we speak of minimal, that typically means all of the extras and goodies removed, and the least possible amount of code required to get the issue to reproduce. That usually means removing things like TypeScript.

[abogaart]

Related to the __webpack_hash__ not defined error (hmr=false, liveReload=true), I found this:
https://github.com/webpack/docs/wiki/list-of-plugins#hotmodulereplacementplugin and https://github.com/webpack/docs/wiki/list-of-plugins#extendedapiplugin

Apparently, the variable __webpack_hash__ is only available when using either one of those plugins.

So, if you only need liveReload = true and therefore explicitly set hmr = false, adding new webpack.ExtendedAPIPlugin() to your list of plugins will fix the __webpack_hash__ not defined error.

[shellscape]

@abogaart great find, thank you. We can shim that global when hmr: false and that should clear that one up.