Webpack-dev-server: Uncaught ReferenceError: __webpack_dev_server_client__ is not defined

[bureson]

• Operating System: Windows 10
• Node Version: 11.12.0
• NPM Version: 6.9.0
• webpack Version: 4.33.0
• webpack-dev-server Version: 3.7.0

• [x] This is a bug
• [ ] This is a modification request

Code

Expected Behavior

Webpack should compile a working bundle.

Actual Behavior

When trying the app in the webpack-dev-server mode (having the webpack-dev-server as part of the URL enabling hot reloading), browser reports a following error:

Uncaught ReferenceError: __webpack_dev_server_client__ is not defined

I believe it is coming from the following line introduced in version 3.7.0: https://github.com/webpack/webpack-dev-server/blob/3d9288a34b715428c521cd22c6f70b6b2d6a04f4/client-src/default/socket.js#L7

Where __webpack_dev_server_client__ doesn't seem to be defined.

For Bugs; How can we reproduce the behavior?

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

It is expected, how you setup webpack-dev-server? This line respect for variable https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/updateCompiler.js#L54, looks you have invalid configuration

[bureson]

Thank you for the reply @evilebottnawi

Can you please take a look at the config we are using for setting up the devServer?

const webpackDevServerOptions = Object.assign({}, configList[0].devServer, {
      publicPath: configList[0].output.publicPath
    });
    const server = new WebpackDevServer(compiler, webpackDevServerOptions);
    return new Promise(resolve => server.listen(8080, 'localhost', resolve));

where the devServer object is as follows:

    devServer: {
      contentBase: './output/build',
      public: 'triggerz.eu.ngrok.io'
    }

and publicPath is '/static/dashboard/'

I would also like to mention that the app loads just fine without using the webpack-dev-server token in the url.

[alexander-akait]

@bureson config looks good, very strange, because we automatically mount provide plugin, maybe you can create minimum reproducible test repo?

[bureson]

@evilebottnawi it's a little tricky to extract the whole project into a reproducible repo.

However when I open either index.bundle.js or live.bundle.js which I'm assuming are compiled package files, the variable __webpack_dev_server_client__ is there available only once and it comes from the assignment which I'm mentioning in the first post.

[roy1910]

@bureson I have the same problem.
the only solution I found for now is to install webpack-dev-server version 3.5.1
version 3.6.0 console the same console message.

• Operating System: MacOS 10.14.5
• Node Version: 10.15.3
• NPM Version: 6.9.0
• webpack Version: 4.33.0

[alexander-akait]

@bureson interesting, looks something wrong with live mode, maybe you can create minimum reproducible test repo?

@roy1910 your message doesn't help, no need write about pinning solve your problem (it is bad idea pinning deps), please create minimum reproducible test repo, it is help not only you

[bureson]

@evilebottnawi I don't think you understood me. Both of the files I'm mentioning (index.bundle.js and live.bundle.js) are the lib files that we get from npm. Changing config wouldn't help this issue. I can see how creating a reproducible repo would help you, but I don't think it is needed in this case. You should be able to see the problem when inspecting any the compiled files available at npm.

[alexander-akait]

@bureson maybe you can't understand how it is works. As i written above when you run webpack-dev-server variable __webpack_dev_server_client__ replaced on this https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/updateCompiler.js#L55 so __webpack_dev_server_client__ should be always defined, maybe with example of problem we avoid misleading

[dr-js]

@evilebottnawi I think the index.bundle.js file @bureson refers to is the file inside the webpack-dev-server package.

And my guess is __webpack_dev_server_client__ value in index.bundle.js file in webpack-dev-server>=3.6.0 did not get pre compile/replaced correctly.

It seems index.bundle.js file is direct served as DEV_HOST:DEV_PORT/webpack-dev-server.js,
from code lib/utils/routes.js:23:

  app.get('/webpack-dev-server.js', (req, res) => {
    res.setHeader('Content-Type', 'application/javascript');

    createReadStream(
      join(__dirname, '..', '..', 'client', 'index.bundle.js')
    ).pipe(res);
  });

And compare index.bundle.js file content between versions there is:

• https://unpkg.com/[email protected]/client/index.bundle.js (content have __webpack_dev_server_client__)
• https://unpkg.com/[email protected]/client/index.bundle.js (no __webpack_dev_server_client__)

+ [@3.7.1] ...?[0-9A-PRZcf-nqry=><]/g}},function(e,r,t){"use strict";var o=__webpack_dev_server_client__,n=0,a=null,s=function(e,r){(a=new o(e)).onOpen...
- [@3.5.1] ...?[0-9A-PRZcf-nqry=><]/g}},function(e,t,r){"use strict";var n=r(14),o=0,i=null,s=function(e,t){(i=new n(e)).onopen=...

Maybe something changed around the package script "build:client:index"?

[alexander-akait]

@dr-js good catch, yep, it is bug

/cc @Loonride @hiroppy critical regression we should search fix asap

[Loonride]

Having __webpack_dev_server_client__ in index.bundle.js is not a bug, it is expected, then it gets defined externally via ProvidePlugin (unless people are somehow using it as an individual unit?).

Having it in live.bundle.js is a bug, since ProvidePlugin only works when inline !== false. I'll try to fix that asap. That aligns with this, since webpack-dev-server/main uses live:

I would also like to mention that the app loads just fine without using the webpack-dev-server token in the url.

[dr-js]

Then it's a lucky catch.

This error occurs in a monkey-patched dev setup with inlined <script src="http://localhost:3808/webpack-dev-server.js"></script> for live reload. I think the code should be directly inherited from:

• https://github.com/mipearson/webpack-rails#use-with-webpack-dev-server-live-reload (No Longer Maintained)

[alexander-akait]

@dr-js yes, you are right, it will be breaking change for next major release

[alexander-akait]

Has invalid fix what potentially can break other application and now it is super critical