devServer.proxy do not support array type and error msg is confusing

[lyt9304]

Version

3.9.0

Environment info

System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.8.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.8.0 
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0 
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0 
    @vue/cli-service: ^3.8.4 => 3.8.4 
    @vue/cli-shared-utils:  3.8.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.2.3 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  6.0.4 (2.0.3, 5.0.0)
    vue-hot-reload-api:  2.3.3 
    vue-lazyload:  1.2.3 
    vue-loader:  15.7.0 
    vue-router: ^3.0.6 => 3.0.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.9.0

Steps to reproduce

// vue.config.js
module.exports = {
  devServer: {
    proxy: [
      {
        context: ['/v/api', '/v/test'],
        target: https://test.com/,
      },
    ],
  }
}

What is expected?

should work fine

What is actually happening?

vue-cli-service serve returns error and given hint:

When specified, "proxy" in package.json must be a string or an object.
Instead, the type of "proxy" was array.
Either remove "proxy" from package.json, or make it an object.

Actually we didn't write proxy in package.json, this error message makes us confusing.

[JounQin]

@sodatea Any news or workaround for this?

[JounQin]

My temporary workaround:

const config = {
  target: process.env.PROXY_TARGET || 'http://localhost:8000',
  secure: false,
  changeOrigin: true,
  logLevel: 'error',
}

const PROXY_URLS = ['api', 'media'].map(_ => '/' + _)

module.exports = PROXY_URLS.reduce(
  (proxies, url) =>
    Object.assign(proxies, {
      [url]: config,
    }),
  {},
)

[jasontianxie]

got the same error

[JounQin]

I'm glad to raise a PR for it.

@jasontianxie Did you tried my workaround mentioned above?

[michalrrcc]

I am facing the same error, I need to exclude part of the proxied context like this:

proxy: [
    {
        context: ['**', '/myapp/api/**', '!/myapp/**'],
        // ...
    },
],

[MatthewAry]

I'm facing this issue as well. @JounQin could you provide some context for your workaround? How would you fit in this fix into vue.config.js?

[MatthewAry]

Oh. NM I had to take a harder look at the code. Looks like you're generating the non-array representation that proxy can accept. Okay. Got it.

[mwahlhuetter]

This is still a problem in v5.0.0-rc.2 Any news on this?