devServer ignore port param when load chunks

[esomkin]

• Operating System: MacOS
• Node Version: 11.9
• NPM Version: 6.9
• webpack Version: 4.29.0
• webpack-dev-server Version: 3.1.14

• This is a bug
• This is a modification request

Code

...
entry: {
	'test/index': [ './resources/assets/modules/test/index', ],
},
output: {
	path: path.resolve(__dirname, './public/build/'),
	publicPath: '/build/',
	filename: '[name].js',
	chunkFilename: '[name].js',
},
...
devServer: {
	host: 'domain',
	port: 8080,
},

import React, { Component, Suspense, lazy, } from 'react';

const BlazyComponent = lazy(() => {
	return import('./blazy');
});

class Main extends Component {
	render () {
		return (<Suspense fallback={<div>Loading...</div>}>
			<BlazyComponent/>
		</Suspense>);
	}
}

export default Main;

Expected Behavior

Load chunk from http://domain:8080/build/0.js

Actual Behavior

Try load chunk from http://domain/build/0.js

For Bugs; How can we reproduce the behavior?

Simply create react environment with dynamic import support

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

[alexander-akait]

@esomkin please create minimum reproducible test repo, all works fine for me

[esomkin]

@evilebottnawi Here is reproducible demo https://github.com/esomkin/repo.
To check this, please start web server with host name = repo and root folder = repo/public.

[jeffreymb]

This issue is majorly affecting our productivity as HMR is completely non-functional. Any ETA on this bug?

I see it is set for the 3.4 milestone, it seems to me like a significant bug that should be resolved in a minor release.

[alexander-akait]

@jeffreymb we have many issues, if you want fix it asap - PR welcome

[knagaitsev]

@evilebottnawi could you reproduce this? The problem as I understand it is that if you go to http://repo:8080/public/ it should try to load http://repo/build/0.js. Mine seemed to work fine and loaded http://repo:8080/build/0.js.

[alexander-akait]

@Loonride i don't look this issue (many work right now), feel free to investigate and send a PR with fix

[alexander-akait]

@esomkin @jeffreymb I can't reproduce problem

[alexander-akait]

Also all work fine on latest version and master, so i am closing issue due it does not reproducible, anyway feel free to feedback and post link on new reproducible test repo, thanks

[seancrater]

@Loonride @evilebottnawi This is definitely a real bug, I've been struggling with it for the past 2 hours. I have a defined host of 0.0.0.0, devServer has a port of 3000 (builds are being consumed from port 8000. My entry and vendor chunk are loading fine but dynamic imports generated by them are failing because webpack-dev-server is trying to fetch from port 8000. This is not the behavior I would expect. I want webpack-dev-server to fetch all assets from the port specified in config.

I'll dig through the dev server code and submit a PR if I find the line causing this.

Update:
Not sure how Webpack fetches dynamically imported modules. If it uses the __webpack_public_path__ then this might fix it since it'll change the config to respect hosts/ports specified within webpack-dev-server.

#2055

[seancrater]

Also, for debugging purposes, my Webpack config looks like this for output/dev-server:

        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, './static/js/dist'),
            publicPath: '/static/js/dist/'
        },
        devServer: {
            // contentBase: path.join(__dirname, 'static/js/dist'),
            headers: { 'Access-Control-Allow-Origin': '*' },
            port: 3000
        },

Output files are loaded via a Django server running on port 8000 and since only dynamically imported files are failing, my gut tells me it's WDS.

[knagaitsev]

@seancrater Does specifying an exact output publicPath fix your problem? Like publicPath: 'http://localhost:3000/static/js/dist/' for the config above?

See #1385 (comment)

[seancrater]

@Loonride worked great! Thank you very much! Kinda sucks but it seems like your PR in there should fix this anyway! 😄