Modules from HotReplacementPlugin being injected into inline JS about pug-plugin HOT 11 CLOSED

I will try to find a workaround for this problem.

from pug-plugin.

@YUCLing
I found the problem, I can fix it!

from pug-plugin.

Oh, I see you do solve the inline JS throwing errors in this situation, although the HMR code still exists.
Making it coexists with HMR code could be a solution, I don't see any further issues so far.

This issue can be closed since things are working now. 😃

from pug-plugin.

@YUCLing

yes, inlined JS contains the HRM code (inc. source maps) and works in a Browser very well with reference to source file.

from pug-plugin.

Hi @YUCLing,

thank you for the issue report!

Temporary solution

Pass the isDev variable into Pug template and use inline JS only if isDev is false.

Pass the mode into webpack.config.js:
packages.json

{
  "scripts": {
    "start": "webpack serve --mode=development",
    "build": "webpack --mode=production --progress",
  },
}

webpack.config.js

module.exports = (env, argv) => {
  const isDev = argv.mode === 'development';
  
  return {
    entry: {
      index: './src/views/home/index.pug',
    },
    plugins: [
      new PugPlugin(),
    ],
    module: {
      rules: [
        {
          test: /.pug$/,
          loader: PugPlugin.loader,
          options: {
            data: {
              isDev, // pass variable in all Pug files 
            }
          }
        },
      ],
    },
  };
}

Pug file

head
  if isDev
    script(src=require('./main.js') defer='defer')
  else
    script=require('./main.js?inline') 
body

from pug-plugin.

Sad to hear this, but still appreciate your effort.

Since I can accept using extracted JS in dev mode, so the temporary hack works for me. 😃
However, this will be helpful and can make the code simpler if there will be a solution found.

from pug-plugin.

@YUCLing

I have fixed the issue in v4.9.2.

from pug-plugin.

Strange, I'm still getting unexpected output here...

Let me see if I can make a minimal reproduction. 😄

from pug-plugin.

@YUCLing

unexpected output

In webpack serve mode or by build too?

from pug-plugin.

@YUCLing

unexpected output

In webpack serve mode or by build too?

Still serve only since I only use HMR in dev mode. (HMR is not enabled in build mode)

from pug-plugin.

The same issue was described by mini-css-extract-plugin issue.
It is a limitation of Webpack.

from pug-plugin.