In chainWebpack, copy plugin is not been defined, but vue inspect works

[AllanChain]

Version

5.0.0-beta.3

Reproduction link

https://github.com/AllanChain/vue-cli-webpack-plugin-undefined

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx
  Binaries:
    Node: 14.16.1 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - D:\tools\npm\yarn.CMD
    npm: 6.14.12 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 92.0.4515.159
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.78)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.6
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-beta.3
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.0-beta.3
    @vue/cli-plugin-babel: ~5.0.0-beta.3 => 5.0.0-beta.3
    @vue/cli-plugin-eslint: ~5.0.0-beta.3 => 5.0.0-beta.3
    @vue/cli-plugin-router:  5.0.0-beta.3
    @vue/cli-plugin-vuex:  5.0.0-beta.3
    @vue/cli-service: ~5.0.0-beta.3 => 5.0.0-beta.3
    @vue/cli-shared-utils:  5.0.0-beta.3
    @vue/compiler-core:  3.2.4
    @vue/compiler-dom:  3.2.4
    @vue/compiler-sfc: ^3.0.0 => 3.2.4
    @vue/compiler-ssr:  3.2.4
    @vue/component-compiler-utils:  3.2.2
    @vue/reactivity:  3.2.4
    @vue/runtime-core:  3.2.4
    @vue/runtime-dom:  3.2.4
    @vue/shared:  3.2.4
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.6.0 => 7.16.0
    vue: ^3.0.0 => 3.2.4
    vue-eslint-parser:  7.10.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.5.0 (15.9.8)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Add vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugin('copy').tap(([options]) => {
      options.patterns[0].globOptions.ignore.push('favicon.ico')
      return [options]
    })
  }
}

Run:

vue inspect --mode production --plugin copy  # works, favicon is in ignore list
yarn build  # fail, see below for output

Or see README.md in reproduction link

What is expected?

yarn build run successfully

What is actually happening?

yarn run v1.22.10
$ vue-cli-service build

✔  Building legacy bundle for production...
 ERROR  Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('copy').use(<Plugin>) first.
Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('copy').use(<Plugin>) first.
    at Object.tap (PROJECT_ROOT\node_modules\webpack-chain\src\Plugin.js:26:15)
    at chainWebpack (PROJECT_ROOT\vue.config.js:3:27)
    at PROJECT_ROOT\node_modules\@vue\cli-service\lib\Service.js:252:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (PROJECT_ROOT\node_modules\@vue\cli-service\lib\Service.js:252:26)
    at PluginAPI.resolveChainableWebpackConfig (PROJECT_ROOT\node_modules\@vue\cli-service\lib\PluginAPI.js:145:25)
    at module.exports (PROJECT_ROOT\node_modules\@vue\cli-service\lib\commands\build\resolveAppConfig.js:9:22)
    at build (PROJECT_ROOT\node_modules\@vue\cli-service\lib\commands\build\index.js:147:50)
    at PROJECT_ROOT\node_modules\@vue\cli-service\lib\commands\build\index.js:77:13
    at Service.run (PROJECT_ROOT\node_modules\@vue\cli-service\lib\Service.js:246:12)

---

I am migrating from v4 to v5. Using chainWebpack to tap copy plugin works in v4 but fails in v5. I have already upgraded copy-webpack-plugin config.

[AllanChain]

That's because copy-webpack-plugin is only added when !isLegacyBundle

vue-cli/packages/@vue/cli-service/lib/config/app.js

Lines 254 to 257 in 3bb2d84

	if (!isLegacyBundle && fs.existsSync(publicDir)) {
	webpackConfig
	.plugin('copy')
	.use(require('copy-webpack-plugin'), [{

And modern mode becomes default in v5.

Either change browserslist to go full modern or detect legacy bundle like:

vue-cli/packages/@vue/cli-service/lib/config/app.js

Line 23 in 6e0d846

const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD