TypeError: Cannot read property 'source' of undefined

Hi! When I try to build my project using v1.0.0-beta.2 of this plugin, html-webpack-plugin v4.0.0-beta.4 and webpack v4.27.0, I’m getting the following error:

  TypeError: Cannot read property 'source' of undefined
  - index.js:53 HtmlWebpackInlineSourcePlugin.resolveSourceMaps
    [web-service-main]/[html-webpack-inline-source-plugin]/index.js:53:22

  - index.js:122 HtmlWebpackInlineSourcePlugin.processTag
    [web-service-main]/[html-webpack-inline-source-plugin]/index.js:122:30

  - index.js:42
    [web-service-main]/[html-webpack-inline-source-plugin]/index.js:42:24

  - Array.forEach

  - index.js:41 HtmlWebpackInlineSourcePlugin.processTags
    [web-service-main]/[html-webpack-inline-source-plugin]/index.js:41:23

  - index.js:25 self.htmlWebpackPlugin.getHooks.alterAssetTagGroups.tapAsync
    [web-service-main]/[html-webpack-inline-source-plugin]/index.js:25:27

  - new Promise

  - Hook.js:154 AsyncSeriesWaterfallHook.lazyCompileHook
    [web-service-main]/[tapable]/lib/Hook.js:154:20

  - index.js:237 assetsPromise.then.then
    [web-service-main]/[html-webpack-plugin]/index.js:237:79

It looks like something is wrong with looking up assets. I’m using multiple entries and I’ve got multiple calls to html-webpack-plugin - I’m generating separate index.html for each language that we support.

The keys in compilation.assets are e.g.:

'assets/main/css/pt.2c4059d6.chunk.css',
'assets/main/css/ru.2c4059d6.chunk.css',
'assets/main/css/tr.2c4059d6.chunk.css',

Taking 'assets/main/css/tr.2c4059d6.chunk.css' as an example, when this plugin is disabled, the generated link tag looks like this:

<link href="/assets/main/css/tr.2c4059d6.chunk.css" rel="stylesheet">

When this plugin is enabled, in the processTag method:

• publicUrlPrefix has value of '/'
• filename has value of tr/index.html
• assetUrl has initially the correct value of 'assets/main/css/tr.2c4059d6.chunk.css'
• but later it’s modified to 'tr//assets/main/css/tr.2c4059d6.chunk.css'
• assetName has value of Users/.../web-service-main/tr/assets/main/css/tr.2c4059d6.chunk.css.

Thus, the check if (processedKey === assetName) in getAssetByName function always fails and the function returns undefined instead of an asset.

If I remove this code:

// if filename is in subfolder, assetUrl should be prepended folder path
if (path.basename(filename) !== filename) {
  assetUrl = path.dirname(filename) + '/' + assetUrl;
}

it seems to work correctly.

[aczekajski]

I had the same error. For me, it’s a difference between having publicPath: '/' in output part of webpack config or not having it. The error is thrown when I don’t set publicPath.

[wmaca]

In case anyone is wondering, in my specific multi-entry setup, the plugin is unable to find the tag href/src value in Webpack’s asset list due to its inability to properly transform the href/src into a valid asset key.

To workaround this, it was enough to set a publicPath for Webpack’s configuration (not the plugin’s), so it could properly find the asset.

In my case, I had multiple links with href similar to ../some/file.css. When I added the publicPath as /, it became /some/file.css in my HTML, and the plugin was able to resolve it as the asset some/file.css (note there is no / in the beginning).

I hope this can be useful to anyone facing the same problem.