Attempt to store configuration for Vue instance in variable before mount it throw errors on plugins installation that need make changes in it

[7iomka]

Version

4.1.2

Environment info

System:
    OS: macOS 10.15.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
  Binaries:
    Node: 11.13.0 - /usr/local/bin/node
    Yarn: 1.17.3 - ~/.npm-global/bin/yarn
    npm: 6.13.2 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 80.0.3987.16
    Firefox: 70.0.1
    Safari: 13.0.4
  npmPackages:
    @ckeditor/ckeditor5-vue: ^1.0.1 => 1.0.1 
    @kazupon/vue-i18n-loader: ^0.3.0 => 0.3.0 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.1.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.1.1 
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.1 
    @vue/cli-plugin-eslint: ^4.1.0 => 4.1.1 
    @vue/cli-plugin-router: ^4.1.0 => 4.1.1 
    @vue/cli-plugin-vuex: ^4.1.0 => 4.1.1 
    @vue/cli-service: ^4.1.0 => 4.1.1 
    @vue/cli-shared-utils:  4.1.1 
    @vue/component-compiler-utils:  3.0.2 
    @vue/eslint-config-airbnb: ^4.0.0 => 4.0.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    bootstrap-vue: ^2.1.0 => 2.1.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    portal-vue:  2.1.6 
    vue: ^2.6.10 => 2.6.10 
    vue-cli-plugin-i18n: ^0.6.0 => 0.6.0 
    vue-cli-plugin-style-resources-loader: ^0.1.4 => 0.1.4 
    vue-dompurify-html: ^2.1.1 => 2.1.1 
    vue-eslint-parser:  5.0.0 
    vue-force-next-tick: ^1.0.3 => 1.0.3 
    vue-functional-data-merge:  3.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.0.0 => 8.15.3 
    vue-i18n-extract:  0.4.14 
    vue-i18n-ts:  0.1.0 
    vue-loader:  15.7.2 
    vue-router: ^3.1.3 => 3.1.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vue-unique-id: ^2.0.0 => 2.0.0 
    vuex: ^3.1.2 => 3.1.2 
    vuex-router-sync: ^5.0.0 => 5.0.0 
  npmGlobalPackages:
    @vue/cli: 4.1.1

Steps to reproduce

1) Change main.js file

Before:

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

After

const app = {
  router,
  store,
  render: h => h(App),
};
// some function that inject some features like global components in app
injectPlugins(app);

new Vue(app).$mount('#app');

2) install plugin, for example: vue add i18n

What is expected?

Plugin is installed, and inside app object will be added i18n prop

What is actually happening?

Errors in console:

Invoking generator for vue-cli-plugin-i18n...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

[LinusBorg]

I think it might be possible to make the codemod support that, or at least handle the error gracefully.

Notice however that we cannot support all possible code variations that users might do to their main.js.

The safest thing is to leave the structure of the new Vue({}) part as it is.

[7iomka]

Notice however that we cannot support all possible code variations that users might do to their main.js.

Yes, of course, no one is talking about supporting any custom file customization options, but I think it's possible to do a search new Vue({}), and if param is not inline object, but defined variable, try to find this variable and make similar additions inside it. Since currently I do not see any workarounds that would not break the assembly. I googled this error and there are people who have encountered it but had no idea about the reason. Now we know.