[Vuejs]-Why does changing configureWebpack in vue.config.js to use an arrow function instead of an object break the configuration?

To answer your problem i took your code and tried to see what was not working, first of all don’t forget that vue.config.js is an object who will be merged into the final webpack config using webpack-merge.

So when you do config.plugins = [] you try to override the plugins Array of webpack with his default configuration such as

VueLoaderPlugin
CaseSensitivePathsPlugin FriendlyErrorsWebpackPlugin etc…

So when you do that they don’t exist anymore so the loader to detect the paths understand vue files and all of it is gone so this is why you getting an error.

Remembering you choosed to use configureWebpack as a function you now need to treat as i said the plugins key as an array and push your new plugins into it or override directly the needed plugins by searching the one needed if it doesn’t fit with what you want

Example who works with your configuration:

  configureWebpack: config => {
    console.log("configureWebpack", config.plugins)
    config.plugins.push(
     new webpack.DefinePlugin({
       'process.env': {
         VERSION: JSON.stringify(packageJson.version),
       },
     }),
    )
  }

Or

  configureWebpack: config => {
    console.log("configureWebpack", config.plugins)
    config.plugins = [
     ...config.plugins,
     new webpack.DefinePlugin({
       'process.env': {
         VERSION: JSON.stringify(packageJson.version),
       },
     }),
    ]
  }

Second part of the problem and maybe i’m mistaken

In your new CopyPlugin it seems you are copying a plugin named itk what i’m guessing is equal to vtk ? Maybe it’s a miss spelling or a typo error so when i tried to change it to this:

        new CopyPlugin({
          patterns: [
            {
              from: path.join(__dirname, 'node_modules', 'vtk.js'),
              to: 'vtk',
              filter: async (resourcePath) => {
                const resourceStats = await stat(resourcePath);
                const resourceSize = resourceStats.size;
                return resourceSize <= (25 * 1024 * 1024);
              },
            },
          ],
        }),

It worked perfectly !