Webpack-4 How to make independent and conditional splitChunks with multiple entries and SSR

Question

I want to make multiple chunks from a certain bundle and use it conditionally rendered by server. The logic for put or not certain script inside the html is controlled by another app, is not a problem. I try Loadable Components, but do not works for me because he generates bad tree dependency.

 export const entry = {
  testAB: testABPath,
  clients: clientsPath,
  styles: stylesPath,
  amp: ampPath,
}

and then, i have:

export const optimization = {
  splitChunks: {
    chunks: 'async',
    cacheGroups: {
      vendor: {
        test(mod) { return checkTest(/[\\/]node_modules[\\/]/, mod)},
        name: 'vendor',
        reuseExistingChunk: true,
        filename: '[name].bundle.js',
        priority: -10,
        chunks: 'all'
      },
      headerA: {
        test: new Regex('/app/src/modules/header/headerA'),
        name: 'header-module-A',
        reuseExistingChunk: true,
        filename: '[name].bundle.js',
        priority: -10,
        chunks: 'all'
      },
      headerB: {
        test: new Regex('/app/src/modules/header/headerB'),
        name: 'header-module-B',
        reuseExistingChunk: true,
        filename: '[name].bundle.js',
        priority: -10,
        chunks: 'all'
      }
    }
  }
}

This generate a clients.js without the Header module code, and header-module-A and header-module-B file, cool.

Scenario 1

I call clients.js, header-module-A and header-module-B in a page. Everything is fine.

Scenario 2

I call clients.js, header-module-A but no header-module-B in a certain page. The clients.js file dont work, because he had the header-module-b has a dependency (the file check all modules with checkDeferredModules function).

At this point, I found this solution https://github.com/webpack/webpack/issues/9629 with the runtimeChunk: 'single' option, and these generate a new Runtime file. My configuration at this point is like:

export const optimization = {
runtimeChunk: 'single',
  splitChunks: {
    chunks: 'async',
    cacheGroups: {
      vendor: {
        test(mod) { return checkTest(/[\\/]node_modules[\\/]/, mod)},
        name: 'vendor',
        reuseExistingChunk: true,
        filename: '[name].bundle.js',
        priority: -10,
        chunks: 'all'
      },
      ...getOtherChunks,
    }
  }
}

I have put the runtime.js file at the header, and the rest of the scripts at the footer, but dont work.

New Scenario 1

I call clients.js, header-module-A and header-module-B in a page. Header not work.

New Scenario 2

I call clients.js, header-module-A but no header-module-B in a certain page. Header not work.

What are i doing wrong?