sockPath, sockPort, sockHost are ignored (regression from #5069)

[nemoneph]

Version

4.3.1

Environment info

Environment Info:

  System:
    OS: Linux 4.19 Alpine Linux
    CPU: (4) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.3.1 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.3.1 
    @vue/cli-plugin-babel: ~4.3.0 => 4.3.1 
    @vue/cli-plugin-eslint: ~4.3.0 => 4.3.1 
    @vue/cli-plugin-router:  4.3.1 
    @vue/cli-plugin-vuex:  4.3.1 
    @vue/cli-service: ~4.3.0 => 4.3.1 
    @vue/cli-shared-utils:  4.3.1 
    @vue/component-compiler-utils:  3.1.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.1.2 => 6.2.2 
    vue: ^2.6.11 => 2.6.11 
    vue-eslint-parser:  7.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Hello,
In my application I have a subpath:
http://my-app/my-path/

So I use sockPath sockHost in my vue.config.js.

module.exports = {
	publicPath: '/my-path/',
	devServer: {
		sockPath: '/my-path/sockjs-node',
		disableHostCheck: true,
		sockPort: '443',
		port: 80,
		host: '0.0.0.0',
		watchOptions: {
			aggregateTimeout: 300,
			poll: true,
			ignored: /node_modules/
		}
	}
}

What is expected?

sockPath, sockHost and sockPort are ignored

What is actually happening?

With vue/cli-service 4.1.2 it's working
With 4.2.0 it's not working anymore.

It's due to this change: #5069

Maybe by default, the sockPath can be the publicPath ?

[sraillard]

When working with subPath different of /, I think the devServer.sockPath can be ajusted automatically based on the publicPath value already configured. And if needed, the devServer.sockPath can still be ovlerloaded.

[bompus]

Possibly related to #4400

[sraillard]

Seems to be fixed in 4.4.1

[McPo]

Still appears to be an issue for me.

This is my current config

module.exports = {
  publicPath: '/ui/',
  devServer: {
    publicPath: '/',
    /*
      Currently broken due to a regession
      https://github.com/vuejs/vue-cli/issues/5372
    */
    // sockPath: '/ui/sockjs-node',
    disableHostCheck: true,
    headers: {
      'Vary': '*' // Required to prevent caching on safari
    }
  }
}

In the previous version it was attempting to reach /sockjs-node instead of `/ui/sockjs-node, even with sockPath defined. In the latest version there has been no change.

Gonna continue to play around with it to see if I can get a fix

[sraillard]

This is working for me:

module.exports = {
  publicPath: '/SUBPATH',
  devServer: {
    public: 'MY_HOSTNAME',
    sockPath: '/SUBPATH/sockjs-node',
    port: 80,
    watchOptions: {
      poll: true,
      ignored: '/node_modules/'
    }
  }
}

Don't forget the vue upgrade to upgrade all the project libraries.

[nemoneph]

I confirm that #4800 fixed my issue. (release 4.4.0)
Thx

[McPo]

@sraillard thanks for your help

Right so a few interesting issues

module.exports = {
  publicPath: '/ui/',
  devServer: {
    public: '127.0.0.1',
    publicPath: '/',
    sockPath: '/ui/sockjs-node',
    disableHostCheck: true,
    headers: {
      'Vary': '*' // Required to prevent caching on safari
    }
  }
}

If you don't specify "public", it appears sockpath is never used.

So sockpath now appears to be getting changed. However I have noticed that since sockpath has been updated. The actual sockjs endpoint is no longer /ui/sockjs-node it is now /ui/ui/sockjs-node.

For some reason If I dont set my public path to '/' it fails to work on the dev server. The template index.html file is never updated to reflect the real contents, it serves the template. nginx is proxying to /, I might be able to fix this by changing it to /ui/. But this should still be possible

Update

module.exports = {
  publicPath: '/ui/',
  devServer: {
    disableHostCheck: true,
    public: '127.0.0.1',
    sockPath: '/ui/sockjs-node',
    headers: {
      'Vary': '*' // Required to prevent caching on safari
    }
  }
}

And changing nginx config from /ui/ -> / to /ui/ -> /ui/. Appears to make got reloading work.
However a bunch of others errors are now appearing

http://127.0.0.1/ui/sockjs-node/536/fnk2bff5/xhr_streaming?t=1591119385811
http://127.0.0.1/ui/sockjs-node/536/3zzetwq1/eventsource
http://127.0.0.1/__webpack_dev_server__/sockjs.bundle.js
http://127.0.0.1/ui/sockjs-node/536/0bhnvjvd/htmlfile?c=_jp.akts0k0
http://127.0.0.1/__webpack_dev_server__/sockjs.bundle.js

obviously __webpack_dev_server__ is coming back 404

So this issue of #5372 appears to be fixed providing you also configure public.

I appear to be running into difference issues now.

[daneren2005]

To add another weird part of it is if you add a port to the public config it won't work. You HAVE to put 127.0.0.1 and not 127.0.0.1:8000. This is weird because in https://webpack.js.org/configuration/dev-server/#devserverpublic it seems like it supposed to include the port and not just be the host.

Edit: But I would like to confirm that you don't need the weird configureWebpack workaround anymore

[tomklino]

sockHost is still being ignored

My workaround (or maybe just the correct way to do this):

  "devServer": {
    ...
    "public": 'farmers.local',
    ...

[gdevdeiv]

Hi there, I ran into this issue today. What's the current issue status?

I'm running:

• "@vue/cli": "^4.5.11"
• "@vue/cli-plugin-babel": "~4.5.11"
• "@vue/cli-plugin-eslint": "~4.5.11"
• "@vue/cli-service": "~4.5.11"