vue inspect rules error

[BotellaA]

Version

3.3.0

Environment info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-3612QM CPU @ 2.10GHz
  Binaries:
    Node: 10.15.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.3.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.3.0
    @vue/cli-plugin-babel: ^3.3.0 => 3.3.0
    @vue/cli-plugin-eslint: ^3.3.0 => 3.3.0
    @vue/cli-service: ^3.3.0 => 3.3.0
    @vue/cli-shared-utils:  3.3.0
    @vue/component-compiler-utils:  2.5.0
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.1.0 => 5.1.0
    vue: ^2.5.22 => 2.5.22
    vue-cli-plugin-electron-builder: ^1.0.0-rc.10 => 1.0.0-rc.10
    vue-cli-plugin-vuetify: ^0.4.6 => 0.4.6
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.5.1
    vue-router: ^3.0.2 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.22 => 2.5.22
    vue-template-es2015-compiler:  1.8.1
    vuetify: ^1.4.2 => 1.4.2
    vuetify-loader: ^1.1.1 => 1.1.1
    vuex: ^3.1.0 => 3.1.0
  npmGlobalPackages:
    @vue/cli: 3.3.0

Steps to reproduce

Execute vue inspect -- rules with the following vue.config.js

var vtkRules = require("vtk.js/Utilities/config/dependency.js").webpack.core
  .rules;

module.exports = {
  configureWebpack: config => {
    config.module.rules.push(...vtkRules);
  }
};

What is expected?

I should get the list of rules + the ones if the file https://github.com/Kitware/vtk-js/blob/master/Utilities/config/dependency.js

What is actually happening?

 ERROR  TypeError: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined
    at config.module.rules.map.r (/home/camaud/programming/Geode/node_modules/@vue/cli-service/lib/commands/inspect.js:25:55)
    at Array.map (<anonymous>)
    at api.registerCommand.args (/home/camaud/programming/Geode/node_modules/@vue/cli-service/lib/commands/inspect.js:25:33)
    at Service.run (/home/camaud/programming/Geode/node_modules/@vue/cli-service/lib/Service.js:219:12)
    at Object.<anonymous> (/home/camaud/programming/Geode/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

[LinusBorg]

This fails when trying to read a prop that webpack-chain adds. it should be present even though the example uses configureWebpack since we use webpack-chain to merge these custom config options into the the chain config, but somehow it fails.

I suspect that the real cause will be found in upstream in webpack-chain, but we might be able to work around.

[jkzing]

@LinusBorg configureWebpack just modifies the config resolved by webpack-chain, and merge with webpack-merge.

vue-cli/packages/@vue/cli-service/lib/Service.js

Lines 233 to 247 in 2b6dba3

	// get raw config
	let config = chainableConfig.toConfig()
	const original = config
	// apply raw config fns
	this.webpackRawConfigFns.forEach(fn => {
	if (typeof fn === 'function') {
	// function with optional return value
	const res = fn(config)
	if (res) config = merge(config, res)
	} else if (fn) {
	// merge literal values
	config = merge(config, fn)
	}
	})

For rules added without webpack-chain, it doesn't have a name... Maybe we should display unknown for these unnamed rules in the output?🤔

[LinusBorg]

Submitted a small PR for this. comments welcome, I'm still undecided between two ways to solve this.