html-webpack-inline-source-plugin: 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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 22

Commits related to this issue

Merge pull request #69 from wulijian/master fix: close #57, 'source' undefined — committed to DustinJackson/html-webpack-inline-source-plugin by DustinJackson 4 years ago

Most upvoted comments

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.

+68

aczekajski on Mar 24, 2020

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.

wmaca on Feb 5, 2020

Hi, I’m getting the same error right after this https://github.com/DustinJackson/html-webpack-inline-source-plugin/issues/56

ERROR in   TypeError: Cannot read property 'source' of undefined

  - index.js:53 HtmlWebpackInlineSourcePlugin.resolveSourceMaps
    [website]/[html-webpack-inline-source-plugin]/index.js:53:22

  - index.js:118 HtmlWebpackInlineSourcePlugin.processTag
    [website]/[html-webpack-inline-source-plugin]/index.js:118:30

  - index.js:42
    [website]/[html-webpack-inline-source-plugin]/index.js:42:24

  - Array.forEach

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

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


  - new Promise


  - index.js:237 assetsPromise.then.then
    [website]/[html-webpack-plugin]/index.js:237:79

package.json

"webpack": "^4.28.4",
"html-webpack-plugin": "^4.0.0-beta.5",
"html-webpack-inline-source-plugin": "^1.0.0-beta.2",

dzotos on Jan 24, 2019

life saver @aczekajski

njerschow on Oct 20, 2021

@SovietFrontier NOPE! I’m still getting the same error.

tejash-jl on Jan 8, 2019

Yup, a little investigation into the source code brings me this: In, index.js:116:

var assetName = path.posix.relative(publicUrlPrefix, assetUrl);

… assetName may get prepended by ../ in case the filename (in new HtmlWebpackPlugin({ ... filename: ``assets/${ COMM_HTML_NAME }`` ...}),) is nested. Since the compilation.assets in the next line has only keys as simple filenames, not with paths, the resulting var asset gets undefined. Which, down the line, raises TypeError: Cannot read property 'source' of undefined.

I bet the simplest solution would be to strip off as many ../ as far the html output file is from the assets. I may be wrong and overlooking something. Leaving this up to you. @DustinJackson @SovietFrontier, et al.

Proposed fix:

var assetName = path.posix.relative(publicUrlPrefix, assetUrl).replace(/^(\.\.\/)+/g, '');

andrevinsky on Dec 19, 2018

I, too, have the variation of this error. I am using:
    "webpack": "^4.27.1",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^3.2.0",
Hey @andrevinsky, @szimek would you mind reverting to v4.25.1 of webpack to see if it will fix your issue? I believe it might be a problem with not keeping up with the new code of webpack but I am not certain and I can’t really test specific use cases that you guys have. Reverting back isn’t the best case scenario but if it solves the problem, that would be a decent workaround until a fix is in place.

@SovietFrontier, the error stays:

    
    ERROR in   TypeError: Cannot read property 'source' of undefined
      
      - index.js:56 HtmlWebpackInlineSourcePlugin.resolveSourceMaps
        [framework]/[html-webpack-inline-source-plugin]/index.js:56:22
      
      - index.js:117 HtmlWebpackInlineSourcePlugin.processTag
        [framework]/[html-webpack-inline-source-plugin]/index.js:117:30
      
      - index.js:49 
        [framework]/[html-webpack-inline-source-plugin]/index.js:49:20
      
      - Array.forEach
      
      - index.js:48 HtmlWebpackInlineSourcePlugin.processTags
        [framework]/[html-webpack-inline-source-plugin]/index.js:48:19
      
      - index.js:29 
        [framework]/[html-webpack-inline-source-plugin]/index.js:29:27
      
      
      - new Promise
      
      
      - Hook.js:154 AsyncSeriesWaterfallHook.lazyCompileHook
        [framework]/[tapable]/lib/Hook.js:154:20
      
      - index.js:673 
        [framework]/[html-webpack-plugin]/index.js:673:47
      
      - index.js:187 Promise.resolve.then.then.then.then.then.then.then.result
        [framework]/[html-webpack-plugin]/index.js:187:18
      
    
    Child html-webpack-plugin for "resources/js/framework-comm.html":
         1 asset
        Entrypoint undefined = resources/js/framework-comm.html
        [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/comm.html 305 bytes {0} [built]

dartandrevinsky on May 28, 2019

Can you specify which version? When looking back at this later, it would be helpful to know the exact version since it will most likely be updated later on.

SovietFrontier on Dec 5, 2018

So if I understand this correctly, the problem is with the multi-entry setup, right? And there is no workaround, right?

Juraj-Masiar on Aug 23, 2019