TypeError: webpack-hot-client: entry Object values must be an Array

[mrchief]

• Operating System: Windows 7
• Node Version: 8.9.4
• NPM Version: 5.2.0
• webpack Version: ^3.10.0
• webpack-dev-server Version: Not using it, rather using koa-webpack
• koa-webpack: ^2.0.3

• This is a bug
• This is a feature request
• This is a modification request

Code

  // webpack.config.js

module.exports = {
  entry: [
    'babel-polyfill', // Support promise for IE browser (for dev)
    'react-hot-loader/patch',
    'webpack-hot-middleware/client?reload=true',
    './src/client.js'
  ]

Expected Behavior

Should not throw above error since entry is an array.

Actual Behavior

Throws TypeError: webpack-hot-client: entry Object values must be an Array

For Bugs; How can we reproduce the behavior?

Just try using an array in the entry section.

This is a bad check. const type = typeof entry will report object for arrays.

Doing a console.log immediately after that line (I modified local node_modules) produces this which only confirms my assertion:

console.log(entry, type, Array.isArray(entry))

// outputs 
[ 'babel-polyfill',
  'react-hot-loader/patch',
  'webpack-hot-middleware/client?reload=true',
  './src/client.js' ] object true

Because of that L#132 gets executed which causes this error.

[mrchief]

@shellscape Will we be seeing a new release of koa-webpack soon?

[mrchief]

Ahh nevermind. Just noticed koa-webpack's package.json. webpack-hot-client@^1.0.1 will satisfy this release. 👍

[EvHaus]

@shellscape I'm getting this error

`webpack-hot-client: `entry` Object values must be an Array

Unrelated to koa-webpack. Instead i'm using webpack-serve. It seems to not support string values for entries in the config file. Should issue be re-opened, or should a new one be logged?

[shellscape]

@EvHaus if you're passing a config to webpack-serve, it'll take care of wrapping the entry for you: https://github.com/webpack-contrib/webpack-serve/blob/master/index.js#L21

If you're passing a compiler to webpack-serve, you'll need to wrap your string entry in an array. This is a requirement, and the only config requirement for webpack-hot-entry.

[EvHaus]

Hmm. I'm passing a plain JS config like so:

{
   entry: {
       app: './somefile.js'
   }
}

And webpack-serve dies immediately with entry Object values must be an Array

[shellscape]

OK, that's the edge case then - an object naming entries. Open an issue in webpack-serve that it's not automatically transforming the config in that situation. The behavior of webpack-hot-client in this case is correct.

[amccloud]

@shellscape I'm not sure this is an edge case as it's the recommended "scalable" configuration option https://webpack.js.org/concepts/entry-points/#object-syntax

Would you be open to me moving your work from webpack-contrib/webpack-serve@7ab2f76 downstream so that webpack-hot-client will work with configs using object entries?

[shellscape]

@amccloud I'm afraid not. webpack-serve is a consumer of webpack-hot-client and consumers of the module should make similar adjustments. There's always webpack-hot-middleware to fall back on if this module doesn't suit your needs, though it comes with some requirements of it's own as it's an older project, although very stable.

[amccloud]

@shellscape bummer. Funny that you mention that, i'm migrating from webpack-hot-middleware to webpack-hot-client based on your suggestion for the same problem @donaldpipowitch was reporting.

I just need webpack-dev-middleware to fallback to index.html 🙃

[shellscape]

@amccloud man I just played myself, didn't I 😄 That is a bummer for sure.

So if you insert a content/static middleware before webpack-dev-middleware, you should be able to pull that off. You just need to set it up so that 404s pass-through to WDM. Failing that, if you can put together a repo for me to play with, I might be able to figure out your setup to make this work.

This whole array requirement is due to a limitation in webpack whereby we can't inject entries after webpack is instantiated and loads a config unless it thinks it's working with a MultiCompiler. I would really love to get some people rallying for a change there, but I haven't had any takers yet.

If we can't get your repo working with this, we might (heavy emphasis) be able to roll a entryInjection: false option that'll just skip the entry validation and injection, but it would mean you'd have to do that yourself, which is kind of against the point of one of the major features of the module.

[amccloud]

So if you insert a content/static middleware before webpack-dev-middleware, you should be able to pull that off. You just need to set it up so that 404s pass-through to WDM. Failing that, if you can put together a repo for me to play with, I might be able to figure out your setup to make this work.

Do you mean something like historyApiFallback?

My goal is to match my development environment to production. In production, all routes use historyApiFallback so that /missing-directory renders /index.html. In development, adding webpackDevMiddleware to my middleware causes /missing-directory to return a 404.

I've also tried the double-before/after dev middleware setup mentioned in webpack/webpack-dev-middleware#44 (comment)

This whole array requirement is due to a limitation in webpack whereby we can't inject entries after webpack is instantiated and loads a config unless it thinks it's working with a MultiCompiler. I would really love to get some people rallying for a change there, but I haven't had any takers yet.

I think I may still have a MultiCompiler with this config?

entry: {
  'example': ['webpack-hot-middleware', './src/example']
}