search

jantimon / html-webpack-plugin

Simplifies creation of HTML files to serve your webpack bundles
MIT License
10.71k stars 1.31k forks source link

webpack 5 <-> html-webpack-plugin 5 #1527

Closed jantimon closed 3 years ago

jantimon commented 4 years ago

Finally Webpack 5 has been released! 👍

During the beta I tried to provide a html-webpack-plugin version which is compatible to webpack 4 and webpack 5.
As there have been some API and typing changes in webpack 5 this approach is limited.

To provide the best possible webpack 5 support I have started on a dedicated webpack 5 version of the html-webpack-plugin.

current progress:

current blockers (help needed by the webpack team):

current alpha playround:

CodeSandbox of the html-webpack-plugin 5.0.0-alpha.17 html-webpack-plugin_5_x_alpha_-_CodeSandbox

Most of the work is done just by me in my spare time for fun - so if this work helps you feel free to buy me a beer 🍺

phungtuanhoang1996 commented 4 years ago

@jantimon I think the webpack team did not update the documentation. I was looking at webpack@5.4.0 source code and the optimize hash stage is there https://github.com/webpack/webpack/blob/84dafd164499b6080243cf9d00537b47b6e075c2/lib/Compilation.js#L3476

jantimon commented 4 years ago

@phungtuanhoang1996 I released 5.0.0-alpha.14 with PROCESS_ASSETS_STAGE_OPTIMIZE_HASH but as mentioned in https://github.com/jantimon/html-webpack-plugin/issues/1527#issuecomment-724543871 this will be only a intermediate solution

Dunqing commented 4 years ago

Hi @jantimon l use the version of html-webpack-plugin@5.0.0-alpha.14 and this error appears "ERROR in Conflict: Multiple assets emit different content to the same filename index.html". What's going on? I use index.ejs no problem.

Here's how to use it

    new HtmlWebpackPlugin({
      favicon: resolveDirname("./public/favicon.ico"),
      template: resolveDirname("./public/index.html")
    }),
jantimon commented 4 years ago

Can you please try to reproduce that bug in the following sandbox and save it as a fork?

https://codesandbox.io/s/html-webpack-plugin-5x-alpha-d37s2?file=/webpack.config.js

Dunqing commented 4 years ago

Can you please try to reproduce that bug in the following sandbox and save it as a fork?

https://codesandbox.io/s/html-webpack-plugin-5x-alpha-d37s2?file=/webpack.config.js

I can’t reproduce using this sandbox. You can clone this repository for testing. https://github.com/1247748612/htmlWebpackPluginDemo

jantimon commented 4 years ago

Sorry your repository has too many different npm packages, abstractions, plugins and logic which makes it very time consuming task to debug..

Dunqing commented 4 years ago

Sorry your repository has too many different npm packages, abstractions, plugins and logic which makes it very time consuming task to debug..

Thanks you. I know, but only then did it cause an error. I use html-webpack-plugin version 4 and it does not cause this bug.

jantimon commented 4 years ago

I am only guessing but it might be because of the VueLoaderPlugin().
Can you please try to remove it and let me know if the error is still occurring?

Dunqing commented 4 years ago

I am only guessing but it might be because of the VueLoaderPlugin(). Can you please try to remove it and let me know if the error is still occurring?

I tried to delete some plugins, then tested and found the reason. This is caused by copy-webpack-plugin because it uses the folder containing index.html. html-webpack-plugin uses index.html.

Dunqing commented 4 years ago

I am only guessing but it might be because of the VueLoaderPlugin(). Can you please try to remove it and let me know if the error is still occurring?

This error appears in this sandbox link, you need to run "yarn webpack" or "yarn webpack serve --port 9090" will appear. https://codesandbox.io/s/html-webpack-plugin-5x-alpha-forked-m1sb4?file=/webpack.config.js

jantimon commented 4 years ago

Wow awesome thanks a lot @1247748612 - it's a bug of the copy plugin as it copies the index.html although should be ignored.

Webpack will now get two index.html files one from HtmlWebpackPlugin and one from the CopyPlugin and doesn't know which is the correct one.. therefore the build fails

Can you please move this bug to the CopyPlugin?

Dunqing commented 4 years ago

Wow awesome thanks a lot @1247748612 - it's a bug of the copy plugin as it copies the index.html although should be ignored.

Webpack will now get two index.html files one from HtmlWebpackPlugin and one from the CopyPlugin and doesn't know which is the correct one.. therefore the build fails

Can you please move this bug to the CopyPlugin?

okay. I have copied it

sethomas commented 3 years ago

I still get the DEP_WEBPACK_COMPILATION_ASSETS message.

Tried with:

jantimon commented 3 years ago

@sethomas That's probably by one of your other plugins - please remove all other plugins and try again or use https://nodejs.org/api/cli.html#cli_trace_deprecation to find out which plugin is causing it

gauravshah27 commented 3 years ago

(node:48122) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation. Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

I can confirm that 5.0.0-alpha.14 resolved the warning above. When can we expect an official release?

jantimon commented 3 years ago

@gauravshah27 right now it is blocked by these two issues:

yossoon commented 3 years ago

The version 5.0.0-alpha.14 seems to unable to "live-reload" on dev-server with multiple "targets" config.

% npx webpack serve --mode development

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    publicPath: '/'
  },
  devServer: {
    contentBase: path.resolve(__dirname, './src'),
    contentBasePublicPath: '/',
    watchContentBase: true,
    hot: true
  },
  target: ['web', 'es5'],
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};
chenxsan commented 3 years ago

@yossoon Should be a bug in webpack-dev-server https://github.com/webpack/webpack-dev-server/issues/2758, you can work around it with target: 'web' for development mode until webpack-dev-server v4 is out.

yossoon commented 3 years ago

Thank you for telling me @chenxsan ! It looks not the right time to migrate Webpack 4 for a while.

bboydflo commented 3 years ago

I think another issue with html-webpack-plugin@next is that it still depends on "@types/tapable": "^1.0.5", but tapable is now version 2.1.1 and has its own types and does not depend on @types

jantimon commented 3 years ago

thanks @bboydflo I added it to the todo list :)

jantimon commented 3 years ago

One blocker around the child compiler has been resolved by the webpack team! :)
I'll try to build a new html-webpack-plugin@next release based on the new child compilation solution soon

Thebarda commented 3 years ago

Hello. I have an issue with the latest commit from next branch. Here is the error when I'm trying to build in development mode.

(node:9744) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Hash.update (internal/crypto/hash.js:84:11)
    at BulkUpdateDecorator.update (C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\lib\util\createHash.js:49:14)
    at NormalModule.updateHash (C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\lib\NormalModule.js:1060:8)
    at Compilation.createModuleHashes (C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\lib\Compilation.js:2726:12)
    at C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\lib\Compilation.js:2064:11
    at Hook.eval [as callAsync] (eval at create (C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\lib\Compilation.js:2024:36
    at eval (eval at create (C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at C:\Users\tdarneix\Development\centreon-dev-ecosystem-wp5\centreon\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:237:53

Using the production mode works perfectly.

And here is my configuration about html-webpack-plugin.

new HtmlWebpackPlugin({
    alwaysWriteToDisk: true,
    template: './www/front_src/public/index.html',
    filename: 'index.html',
}),
garand commented 3 years ago

Apologies if this isn't the right place for this. I'm experimenting with the type: 'asset/resource' field for css files with webpack 5. The CSS files are being emitted correctly, however html-webpack-plugin is not including them in the final HTML file. I tried@next` as well with the same result. Is that just something that is still being worked on or do I need additional configuration for that workflow?

jantimon commented 3 years ago

@garand can you please create an example with type: 'asset/resource' on codesandbox?
You can use this box as template: https://codesandbox.io/s/html-webpack-plugin-5x-alpha-d37s2?file=/webpack.config.js

There is an open task already in the intro post - with a link to a possible solution I need to try :)

jantimon commented 3 years ago

released html-webpack-plugin@5.0.0-alpha.15

jantimon commented 3 years ago

@sokra merged https://github.com/webpack/webpack/pull/11956 which allows to define the timing when html-webpack-plugin runs during the compilation into webpack v5.10.0!

This resolves all current blockers and allows to prepare a html-webpack-plugin beta version!

Current open tasks before a beta can be release:

SevenOutman commented 3 years ago

Similar problem with https://github.com/jantimon/html-webpack-plugin/issues/1527#issuecomment-738001951. I'm using 5.0.0-alpha.15 and getting The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined error in development mode.

The error stack traces down to the following statement https://github.com/jantimon/html-webpack-plugin/blob/1de31cd85e1a995837cf8986f741d801660ecef1/lib/cached-child-compiler.js#L237

Here's my configuration

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'public/index.html',
  templateParameters: {
    version: childProcess.execSync('git rev-parse --short HEAD').toString(),
    publishDate: `${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
  },
  minify: false,
}),
jantimon commented 3 years ago

@SevenOutman can you please create an minimal reproduction example of that bug on codesandbox? You can use this box as template: https://codesandbox.io/s/html-webpack-plugin-5x-alpha-d37s2?file=/webpack.config.js

SevenOutman commented 3 years ago

@jantimon No idea how to get sandbox to run with my webpack config. Here's my fork of your template. I changed template option to src/index.html but the terminal keeps throwing Can't resolve '/sandbox/src/template.ejs' in '/sandbox' even if I'm not requiring that path.

jantimon commented 3 years ago

@SevenOutman your sandbox looks great: html-webpack-plugin_5_x_alpha__forked__-_CodeSandbox you have to restart the sandbox from time to time

Thebarda commented 3 years ago

@jantimon @SevenOutman I don't think this error come from html-webpack-plugin. I have experimented this issue without html-webpack-plugin. I think it is related to webpack

SevenOutman commented 3 years ago

@Thebarda Looks like you're right. The error is gone when I remove importing .svg from my source code.

Thebarda commented 3 years ago

@SevenOutman What is your loader for SVG file ?

SevenOutman commented 3 years ago

@Thebarda I'm using svg-sprite-loader, installed v5.1.1 directly from GitHub.

Eli-Black-Work commented 3 years ago

@SevenOutman For what it's worth, we're also using svg-sprite-loader version 5.1.1 and are getting this error:

[webpack-cli] TypeError: Cannot read property 'outputPath' of undefined
    at SVGSpritePlugin.apply (C:\sources_git\strata\applications\alabaster\ui\node_modules\svg-sprite-loader\lib\plugin.js:64:29)
    at createCompiler (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\webpack.js:69:12)
    at create (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\webpack.js:113:15)
    at webpack (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\webpack.js:121:46)
    at f (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack\lib\index.js:35:15)
    at WebpackCLI.createCompiler (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack-cli\lib\webpack-cli.js:176:24)
    at WebpackCLI.run (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack-cli\lib\webpack-cli.js:268:25)
    at async runCLI (C:\sources_git\strata\applications\alabaster\ui\node_modules\webpack-cli\lib\bootstrap.js:59:9)

Disabling html-webpack-plugin didn't seem to help, and disabling svg-sprite-loader got rid of the error, so I agree with @Thebarda this particular bug is probably originating from somewhere else 🙂

I've filed a bug at https://github.com/JetBrains/svg-sprite-loader/issues/425

jantimon commented 3 years ago

Thanks to the help from @sokra I managed to finish up the last two tasks 🎉

I released html-webpack-plugin@5.0.0-alpha.17 - please let me know if it works for you so we can release a stable version soon

AviVahl commented 3 years ago

alpha.16 appears to work fine in 3 projects I've tried.

EDIT: make that 4 projects.

csvan commented 3 years ago

alpha-16 works well across 9 projects using it on our side.

jungleBadger commented 3 years ago

Hi there, html-webpack-plugin@5.0.0-alpha.16 was working fine, but I just upgraded to html-webpack-plugin@5.0.0-alpha.17 and getting errors on my build; here are some details:

Webpack execution error log

{
  version: '5.10.3',
  time: 14029,
  assetsByChunkName: { index: [ '2bf44e36f5737e2fdea7.bundle.js' ] }
,
  assets: undefined,
  filteredAssets: 27,
  modules: undefined,
  filteredModules: 1430,
  errors: [
    {
      message: '  Error: Child compilation failed:\n' +
        "  Cannot read property 'slice' of undefined\n" +
        "  TypeError: Cannot read property 'slice' of undefined\n" +
        '  \n' +
        '  - plugin-webpack5.js:123 Object.resourceQuery [as fn]\n'
+
        '    [platform]/[vue-loader]/lib/plugin-webpack5.js:123:39\n
' +
        '  \n' +
        '  - RuleSetCompiler.js:99 execRule\n' +
        '    [platform]/[webpack]/lib/rules/RuleSetCompiler.js:99:21
\n' +
        '  \n' +
        '  - RuleSetCompiler.js:118 execRule\n' +
        '    [platform]/[webpack]/lib/rules/RuleSetCompiler.js:118:6
\n' +
        '  \n' +
        '  - RuleSetCompiler.js:137 Object.exec\n' +
        '    [platform]/[webpack]/lib/rules/RuleSetCompiler.js:137:6
\n' +
        '  \n' +
        '  - NormalModuleFactory.js:403 \n' +
        '    [platform]/[webpack]/lib/NormalModuleFactory.js:403:34\
n' +
        '  \n' +
        '  - NormalModuleFactory.js:116 \n' +
        '    [platform]/[webpack]/lib/NormalModuleFactory.js:116:11\
n' +
        '  \n' +
        '  - NormalModuleFactory.js:544 \n' +
        '    [platform]/[webpack]/lib/NormalModuleFactory.js:544:8\n
' +
        '  \n' +
        '  \n' +
        '  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]\n'
+
        '    [platform]/[webpack]/[tapable]/lib/Hook.js:18:14\n' +
        '  \n' +
        '  - NormalModuleFactory.js:542 \n' +
        '    [platform]/[webpack]/lib/NormalModuleFactory.js:542:8\n
' +
        '  \n' +
        '  - child-compiler.js:159 \n' +
        '    [platform]/[html-webpack-plugin]/lib/child-compiler.js:
159:18\n' +
        '  \n' +
        '  - Compiler.js:511 \n' +
        '    [platform]/[webpack]/lib/Compiler.js:511:11\n' +
        '  \n' +
        '  - Compiler.js:1059 \n' +
        '    [platform]/[webpack]/lib/Compiler.js:1059:17\n' +
        '  \n' +
        '  \n' +
        '  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]\n'
+
        '    [platform]/[webpack]/[tapable]/lib/Hook.js:18:14\n' +
        '  \n' +
        '  - Compiler.js:1055 \n' +
        '    [platform]/[webpack]/lib/Compiler.js:1055:33\n' +
        '  \n' +
        '  - Compilation.js:2119 \n' +
        '    [platform]/[webpack]/lib/Compilation.js:2119:10\n' +
        '  \n' +
        '  \n' +
'  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]\n' +

        '    [platform]/[webpack]/[tapable]/lib/Hook.js:18:14\n' +
        '  \n' +
        '  - Compilation.js:2112 \n' +
        '    [platform]/[webpack]/lib/Compilation.js:2112:37\n' +
        '  \n'
    }
  ],
  errorsCount: 2,
  warnings: [],
  warningsCount: 0,
  logging: {
    'webpack.Compiler': { entries: [], filteredEntries: 9, debug: fal
se },
    'webpack.ResolverCachePlugin': { entries: [], filteredEntries: 1,
 debug: false },
    'webpack.FlagDependencyExportsPlugin': { entries: [], filteredEnt
ries: 4, debug: false },
    'webpack.Compilation': { entries: [], filteredEntries: 22, debug:
 false },
    'webpack.SideEffectsFlagPlugin': { entries: [], filteredEntries:
1, debug: false },
    'webpack.buildChunkGraph': { entries: [], filteredEntries: 13, de
bug: false },
    'webpack.SplitChunksPlugin': { entries: [], filteredEntries: 4, d
ebug: false },
    'webpack.FileSystemInfo': { entries: [], filteredEntries: 14, deb
ug: false }
  }
}
[21:18:58] About to exit with code: 0
'    [platform]/[webpack]/[tapable]/lib/Hook.js:18:14\n' +
        '  \n' +
        '  - Compilation.js:2112 \n' +
        '    [platform]/[webpack]/lib/Compilation.js:2112:37\n' +
        '  \n'
    }
  ],
  errorsCount: 2,
  warnings: [],
  warningsCount: 0,
  logging: {
    'webpack.Compiler': { entries: [], filteredEntries: 9, debug: false },
'webpack.ResolverCachePlugin': { entries: [], filteredEntries: 1, debug: false },
    'webpack.FlagDependencyExportsPlug    'webpack.FlagDependencyExportsPlugin': { entries: [], filteredEntries: 4, debug: false },
    'webpack.Compilation': { entries: [], filteredEntries: 22, debug: false },
    'webpack.SideEffectsFlagPlugin': { entries: [], filteredEntries: 1, debug: false },
    'webpack.buildChunkGraph': { entries: [], filteredEntries: 13, debug: false },
    'webpack.SplitChunksPlugin': { entries: [], filteredEntries: 4, debug: false },
    'webpack.FileSystemInfo': { entries: [], filteredEntries: 14, debug: false }
  }
}

webpack.js Plugins declaration

"plugins": [
    new CleanWebpackPlugin(),
    new webpack.EnvironmentPlugin({
        "NODE_ENV": env.NODE_ENV,
        "DEFAULT_LOCALE": "en-US",
        "DEFAULT_FALLBACK": "en-US"
    }),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        "filename": path.join(__dirname, "index.html"),
        "template": path.join(__dirname, "index.ejs")
    }),
    new ScriptExtHtmlWebpackPlugin({
        "defaultAttribute": "async"
    })
],

Dependencies

OS: Win 10 pro

Captura de tela 2020-12-15 212053

Extra info

  1. It was working as-is with v-16.
  2. I have other modules with different codes, and they all behave the same.

Let me know if I can provide anything else

qizf7 commented 3 years ago

same to @jungleBadger, my operation is "mac os 11"

jantimon commented 3 years ago

@AviVahl @csvan sorry I meant html-webpack-plugin@5.0.0-alpha.17

jantimon commented 3 years ago

@jungleBadger @qizf7 - thanks I could reproduce the behaviour here: https://codesandbox.io/s/html-webpack-plugin-5x-alpha-vue-6n1ub?file=/webpack.config.js:0-360

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/template.ejs"
    })
  ]
};

According to the stack the error happens in vue-loader: [platform]/[vue-loader]/lib/plugin-webpack5.js:123:39 here: https://github.com/vuejs/vue-loader/blob/74020775b3e5a814c87d99381564e0d9e3d8d912/lib/plugin-webpack5.js#L123

I opened an issue at the vue-loader repo:

https://github.com/vuejs/vue-loader/issues/1771

jantimon commented 3 years ago

It looks like that html-webpack-plugin@5.0.0-alpha.17 is using a new webpack 5 feature which is not supported by vue-loader: https://github.com/vuejs/vue-loader/issues/1771#issuecomment-745901553

Hopefully this will not cause additional issues with similar loaders or plugins..

I created https://github.com/webpack/webpack/issues/12214 so maybe it can be solved directly by webpack

jantimon commented 3 years ago

The vue loader issue is fixed with vue-loader >= 16.1.2

dsngo commented 3 years ago

alpha 17 causes:

Cannot read property 'startsWith' of undefined
Error: Child compilation failed:
  TypeError: Cannot read property 'startsWith' of undefined

  - RuleSetCompiler.js:220 Object.fn
    [RVSNew]/[webpack]/lib/rules/RuleSetCompiler.js:220:20

  - RuleSetCompiler.js:99 execRule
    [RVSNew]/[webpack]/lib/rules/RuleSetCompiler.js:99:21

  - RuleSetCompiler.js:118 execRule
    [RVSNew]/[webpack]/lib/rules/RuleSetCompiler.js:118:6

  - RuleSetCompiler.js:137 Object.exec
    [RVSNew]/[webpack]/lib/rules/RuleSetCompiler.js:137:6

  - NormalModuleFactory.js:403 
    [RVSNew]/[webpack]/lib/NormalModuleFactory.js:403:34

  - NormalModuleFactory.js:116 
    [RVSNew]/[webpack]/lib/NormalModuleFactory.js:116:11

  - NormalModuleFactory.js:544 
    [RVSNew]/[webpack]/lib/NormalModuleFactory.js:544:8

  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [RVSNew]/[webpack]/[tapable]/lib/Hook.js:18:14

  - NormalModuleFactory.js:542 
    [RVSNew]/[webpack]/lib/NormalModuleFactory.js:542:8

  - child-compiler.js:159 
    [RVSNew]/[html-webpack-plugin]/lib/child-compiler.js:159:18

  - Compiler.js:511 
    [RVSNew]/[webpack]/lib/Compiler.js:511:11

  - Compiler.js:1059 
    [RVSNew]/[webpack]/lib/Compiler.js:1059:17

  - task_queues:93 processTicksAndRejections
    node:internal/process/task_queues:93:5

Previously it worked as expected with alpha 14. It also works normally with alpha 16. I suspect export-loader or webpack externals have conflicts with alpha 17.

jantimon commented 3 years ago

@geart891 the latest alpha 17 is using a new webpack 5 feature which seems to be unsupported by one of you other plugins or loaders - see https://github.com/webpack/webpack/issues/12214

olegshtch commented 3 years ago

I get this error and it's gone when I commented html-loader.

jantimon commented 3 years ago

@olegshtch can you please try to build up a minimal webpack config (only html-webpack-plugin and html-loader) which causes this problem? (similar to this one for vue-loader https://github.com/jantimon/html-webpack-plugin/issues/1527#issuecomment-745838536)

olegshtch commented 3 years ago

Looks like there still conflict between vue-loader and html-loader. If I disable vue-loader instead of html-loader error is also gone.