Error: optimization.usedExports can't be used with cacheUnaffected as export usage is a global effect

Question

Im using next 14 and i wanted to enable tree-shaking which i found that i have to enable usedExports in the webpack which lead to this config:

  webpack: (config, { isServer }) => {
    if (!isServer) {
      // don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
      config.resolve.fallback = {
        fs: false,
      }

      config.plugins = [...config.plugins, new PrismaPlugin()]
    }

    config.optimization.usedExports = true

    config.optimization.minimizer = [
      new TerserPlugin({
        minify: TerserPlugin.swcMinify,
        terserOptions: {
          mangle: {
            // older versions of node-fetch requires AbortSignal to be untouched.
            // https://github.com/node-fetch/node-fetch/issues/784
            reserved: ["AbortSignal"],
          },
        },
      }),
    ]

    return config
  },
}

And this happend:

Error: optimization.usedExports can't be used with cacheUnaffected as export usage is a global effect

I even tryed to disable cacheUnaffected but it said that the config is invalid:

config.cache.cacheUnaffected = false

Lead to :

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.