middleware blocks on requests to non-webpack assets

[bruce-c-liu]

middleware blocks on requests to non-webpack assets

[alexander-akait]

I think it is due '/dist/' and / webpack is thinking it is a part of request to bundle code, maybe we should improve this, do you want to send a PR?

[alexander-akait]

Yeah, I am looking this right now and will provide details soon

[alexander-akait]

@bruce-c-liu I checked code and I understand why it was changed, our publucPath can be 'auto' (i.e. based on output path and yes you can emit assets above output path using ../../[name][ext]) and also we support dynamic function, so we can't know your assets URLs until we build a project, what is why we block requests, but it doesn't mean you can't solve it, just change:

app.use( "/dist/",
  webpackDevMiddleware(compiler, {
    publicPath: '/',
  })
);

and all works correctly, I want to say it is a limitation

[alexander-akait]

And yes you can have publicPath: "/[hash]/public/", and we can't calculate hash without bundling, so I think we need improve our docs and provide an example:

app.use( "/dist/",
  webpackDevMiddleware(compiler, {
    publicPath: '/',
  })
);

when you want to avoid such behaviour

[alexander-akait]

Are you fine with it?

[alexander-akait]

Strange, we have https://github.com/webpack/webpack-dev-middleware/blob/master/src/middleware.js#L98, maybe you have something unusual with your public path?

[alexander-akait]

Can you provide minimum reproducible example with configuration?

[bruce-c-liu]

Hmm, I tried to create a minimum repro, but I wasn't able to get the same behavior. Might be some weird combo of plugins in our project. It's not really a big deal, so I'll just close this. Thanks!

[bruce-c-liu]

Minutes after I wrote that comment, I was able to repro, haha... See the comment in app.js for context.

Repro steps:

• yarn
• Run node pingServer.js with webpack-dev-middleware 3.7.2 vs 5.3.3 to see the difference in how it handles a request to a non-webpack asset.
  • 3.7.2: 'NON-WEBPACK ASSET ENDPOINT' logs before bundle builds
    • This should probably be the optimal behavior?
  • 5.3.3: 'NON-WEBPACK ASSET ENDPOINT' logs after bundle builds

File structure:

• index.js
• pingServer.js
• package.json
• app.js

// index.js

// importing mui because it takes a little while to build. That time it takes better represents a real app's webpack build.
import * as mui from 'material-ui';

console.log(mui);

// pingServer.js

const child_process = require('child_process');
const fetch = require('node-fetch');

const child = child_process.fork('./app.js');

// keeps pinging server until it returns a response
async function pingServer() {
  while (true) {
    try {
      // GET non-webpack resource
      const res = await fetch('http://localhost:3000');
      console.log('Server started!');

      const data = await res.text();
      console.log(data.slice(0, 50));
      return;
    } catch (e) {
      console.log('Server not ready yet');

      // sleep for 100ms and ping again
      await new Promise((resolve) => {
        setTimeout(resolve, 100);
      });
    }
  }
}

process.on('SIGINT', function () {
  console.log('killed!');
  child.kill();
});

pingServer();

// app.js

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const express = require('express');

const app = express();

const compiler = webpack({
  mode: 'development',
  entry: './index.js',
});
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: '/dist/', // <---- Notice publicPath vs the endpoint we're actually hitting!
  })
);

// On fetch('http://localhost:3000'):
// - in 3.7.2, this gets hit immediately even if bundle hasn't finished building
// - in 5.3.3, this gets hit after bundle finishes building
// Notice that we are fetching a non-webpack asset endpoint. I think
// in 3.7.2, webpack-dev-middleware may have recognized that and optimized it by
// going next() immediately? On the other hand, 5.3.3 doesn't seem to make that optimization?
app.get('/', (req, res) => {
  res.send('NON-WEBPACK ASSET ENDPOINT');
});

app.listen(3000);

{
  "name": "repro",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "express": "4.17.1",
    "material-ui": "^0.20.2",
    "node-fetch": "2.6.7",
    "webpack": "4.46.0",
    "webpack-dev-middleware": "3.7.2"
  }
}

[bruce-c-liu]

I think it is due '/dist/' and / webpack is thinking it is a part of request to bundle code.

Yes, I believe that is the reason as well. Seems like the behavior was optimized in 3.7.2, but is no longer the case.

do you want to send a PR?
Unfortunately, I do not have the bandwidth to take that on at the moment. This is not a blocking issue for me, so feel free to prioritize whenever.

Thank you for the fast responses!

[alexander-akait]

Even more you can change output path and public path inside plugins, that is why we get it from stats https://github.com/webpack/webpack-dev-middleware/blob/master/src/utils/getPaths.js#L15

[bruce-c-liu]

Ah, that makes sense! Thank you for the explanation.

[alexander-akait]

Let's keep open I want to improve our documentation 😄 If you want you can send a PR

[alexander-akait]

Oh, looks like we have this one #966, so let's close