CODEWITHSUNDEEP
node.jswebpack
bsr
bsr

Reputation: 58682

webpack verbose error message

I was using webpack, and recently updated few packages (babel, babel-loader,..) and see an error in webpack output. but, not sure how to debug further. The application seems to work fine. I tried with various debug options, but not getting a verbose output of the error.

 ./node_modules/.bin/webpack  --config webpack.config.js --progress --profile --colors --display-error-details --display-reasons --debug
NODE_ENV == production :  false
6809ms build modules      
14ms seal
55ms optimize
30ms hashing
59ms create chunk assets
27ms additional chunk assets
1551ms optimize chunk assets
33ms optimize assets
83ms emit
Hash: 5be1a8485c4110c2f837
Version: webpack 1.9.8
Time: 8674ms
      Asset       Size  Chunks             Chunk Names
mww7few.ttf    78.4 kB          [emitted]   
elilql0.png    7.47 kB          [emitted]  
  client.js    3.98 MB       0  [emitted]  main
 index.html  130 bytes          [emitted]  
   [0] multi main 52 bytes {0} [built]
       factory:0ms building:3ms = 3ms
    + 387 hidden modules

ERROR in undefined

I am not sure what is that ERROR in undefined. I suspect an issue with a loader, as I updated babel-loaderbut not sure how to know more.

Upvotes: 9

Views: 9487

Answers (3)

Gonfva
Gonfva

Reputation: 1468

In case somebody gets to this question and it is not an issue with htmlWebpackPlugin, IMO the actual issue is in Webpack itself that doesn't provide the correct error.

Apparently this PR attempts to solve it

https://github.com/webpack/webpack/pull/1146

We have plugins we use that were thowing errors that were strings. However the errors reporrted were

Error undefined which was little to no help. Now we actually get the error reporting we need.

Stats now error reporting catches string errors. Some plugins appear to not obey the rules on error reporting. However this makes debuging a nightmare for users. Therefore the string should be allowed.

Upvotes: 2

jantimon
jantimon

Reputation: 38150

This is a bug in the webpack-html-plugin version 1.4 and was fixed in 1.5

The reason for the error is that o.htmlWebpackPlugin.assets is deprecated.
You should use o.htmlWebpackPlugin.files instead to be able to use css and manifest files:

<!DOCTYPE html>
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest %}"{% } %}>
  <head>
    <meta charset="UTF-8">
    <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
    {% if (o.htmlWebpackPlugin.files.favicon) { %}
    <link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}">
    {% } %}
    {% for (var css in o.htmlWebpackPlugin.files.css) { %}
    <link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
    {% } %}
  </head>
  <body>
    {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
    <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
    {% } %}
  </body>
</html>

However there is even a simpler way.
The webpack-html-plugin 1.3+ has a feature which will inject all assets (css, favicon, javascript and manifest files) into your template. So your configuration might look like this:

new HtmlWebpackPlugin({
  inject: true,
  template: 'template.html',
  title: 'Custom template',
})

and the template:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
  </head>
  <body>
  </body>
</html>

Upvotes: 2

chriz
chriz

Reputation: 1896

@bsr

I recently had this same problem. It turns out it was from HtmlWebpackPlugin. I forgot to pass a title

new HtmlWebpackPlugin({
  ....
  title: 'Title'
}),

And on my template I had this <title>{%=o.htmlWebpackPlugin.options.title

So If you use HtmlWebpackPlugin, make sure you pass all the parameters there.

Upvotes: 2

Related Questions