Webpack 4 not including asset

[psiie]

Does this work with Webpack4? I can find the asset just fine (using the copy plugin as directed) but html-webpack-include-assets-plugin never adds anything to the html.

webpack: 4.14.0 html-webpack-include-assets-plugin: 1.0.4

[justincorrigible]

To add some info, in my project we have the latest packages for all the Webpack + Babel dependencies as of today. the output is <script src="undefined"></script> where it used to inject a JS file correctly on Webpack 3. I could PR a fix if anyone points me in the right direction?

[jharris4]

Sorry for the delay on this. I'm currently using this plugin with webpack 4, but had been using it just fine with webpack 3 before that.

I suspect that any issues where the plugin is not working as expected with either of these versions is due to a specific configuration that's being used.

I can try to help dig into it a little if you can provide a reproducible example...

[justincorrigible]

In my case:

new HtmlWebpackIncludeAssetsPlugin({
    append: true,
    assets: ['js/plugins/moment/moment-with-locales.min.js']
});

Turns into <script src="undefined"></script>

@jharris4 Ideas?

---

PS: even on Webpack 3, I was never able to add the following successfully, but I'll open a ticket/PR for that one later, if I get to use this plugin.

{
     path: 'js/plugins/moment/moment-timezone-with-data.min.js',
     attributes: { defer: 'true' }
}

[jharris4]

@caravinci without a runnable example, it's hard for me to see anything wrong.

You can look at the unit tests here, they have a bunch of tests/examples that are all currently working with webpack 3 (and I've run them locally with webpack 4 too).

Maybe try and copy and paste examples from the unit tests and make sure they work with your setup, and then try to pinpoint the issue?

Also, what version of the various plugins are you using?

[justincorrigible]

Fair enough. I'm just not sure what to show you (perhaps the whole webpack.config file?) as I'm not able to give you a runnable version of the app I'm working on (private repos and all that).

I'll try the Jasmine approach you suggest and see what I can get. It just seems odd that the bare basic example works well on Webpack 3, yet breaks on 4. Could be some plugin hook issue, would be my best guess, but I'm simply not able to troubleshoot that far.

Let me try the tests to see if maybe there's something we should add to the documentation, that I'm somehow missing.

[jharris4]

Ya, I have the same problem, most of the stuff I use these plugins for is proprietary which makes it hard to post examples.

I do have another plugin which uses this plugin, and has tests that pass when using webpack 4, so I can definitely confirm that this plugin works with both webpack 3 & 4, but maybe you need to track down what's different in your webpack config versus the various examples in the tests.

If you're interested, the plugin is: https://github.com/jharris4/html-webpack-deploy-assets-plugin

And the tests are: https://github.com/jharris4/html-webpack-deploy-assets-plugin/blob/master/test/index_spec.js

[justincorrigible]

oooh I like that one, I could potentially use it instead, and could fix my issue (albeit not the issue on this plugin, if there really is one at all).

Let me check and get back to you. Thanks! :+1:

[ccat3z]

It seems breaks only when using html-webpack-plugin@4.0.0-alpha b252108bdba77c2354d53ee4ab72d157dfee4fc3 maybe fix it

[justincorrigible]

My project is indeed using that version of html-webpack-plugin, so this commit (which seems to be missing from the master timeline, and I think I see why) gives me an idea on how to deal with the issue. May be able to open a PR later. Setting a reminder for this. Could you please assign this bug to me up there? ☝️

Thanks @jharris4 @c0ldcat for your attention.

[jharris4]

Ah yes, there are breaking changes in the API for the alpha version of html-webpack-plugin and they actually did give warning:

https://github.com/jantimon/html-webpack-plugin/issues/971

I haven't had the time to look into it yet, but you're more than welcome to make a PR! :-)

PS. @caravinci Are you from Toronto? I'm actually driving there today! :-)

[justincorrigible]

haha hit me up. I'm free this weekend and we can hang out.

[ganesharulanantham]

@jharris4 and @caravinci Ooops. Any tentative fix plan? or Should I downgrade to webpack 3?

[jharris4]

@ganesharulanantham the plugin works with webpack 4. It’s the beta version of html-webpack-plugin that it doesn’t work with yet

[danburzo]

Hmm, I can't seem to make the plugin include any assets using

  "html-webpack-include-assets-plugin": "^1.0.4",
  "html-webpack-plugin": "^3.2.0",
  "webpack": "^4.16.5",

and:

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['mychunk'],
    template: path.join(process.cwd(), 'mytemplate.html'),
    filename: 'myfile.html'
  }),
  new HtmlWebpackIncludeAssetsPlugin({
    files: ['myfile.html'],
    assets: {
      path: '<some/path/to/cdn>',
      type: 'css'
     },
    append: true
  })
]

Debugging the code I noticed that:

compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync('htmlWebpackIncludeAssetsPlugin', onBeforeHtmlGeneration);
compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('htmlWebpackIncludeAssetsPlugin', onAlterAssetTag);

this doesn't seem to have any effect? (the two methods are not called throughout the process)

Edit: Turns out this only happens when I use more than one html-webpack-plugin in the plugins array, with html-webpack-include-assets-plugin in the middle. (Opened an issue here)

[jharris4]

@danburzo thanks for filing that other issue. I’m not sure if there’s anything I can do to help on my end?

Also, I’ll be away from the computer the next couple of days, so apologies if I’m not responsive until I get back... 😉

[danburzo]

No problem, @jharris4! I've sorted it out from my webpack config, for now.

[jharris4]

Version 1.0.5 has just been released with support for the new API introduced in html-webpack-plugin 4.X+, and all unit tests are now run on webpack 4.x instead of webpack 3.x.

[danburzo]

Perfect, thank you!