Webpack output.jsonpFunction fails to prevent naming colision

Question

webpack version "webpack": "^4.32.2",

I have two webpack bundles, each one represent a different website. in both I have different modules with same name:

./app/shared/logo/logo.jsx

When I navigate at client level (without trigger a page reload) from website A to website B

website B try to use logo.jsx from site A and the site breaks. I got a suggestion of use output.jsonpFunction but still having same result.

Site A config:

 {name: 'client',
  target: 'web',
  mode: 'development',
  devtool: 'inline-source-map',
  performance: {
    hints: false,
  },
  entry: { main: `${paths.srcClient}/mainfile.js` },
  output: {
    path: paths.clientBuild,
    publicPath: paths.publicPath,
    filename: 'js/websiteA-[name]-[contenthash:8].js',
    chunkFilename: 'js/websiteA-[name]-[contenthash:8].js',
    libraryTarget: 'umd',
    library: 'websiteA',
    crossOriginLoading: 'anonymous',
    jsonpFunction: 'websiteA',
  },
  module: {
    rules: clientLoaders,
  },
  resolve: { ...resolvers },
  plugins: [...plugins.client],
  node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
    'styled-components': 'styled-components',
    axios: 'axios',
  },
  stats: {
    cached: false,
    cachedAssets: false,
    chunks: false,
    chunkModules: false,
    colors: true,
    hash: false,
    modules: false,
    reasons: false,
    timings: true,
    version: false,
  },
};

website B

{
  name: 'client',
  target: 'web',
  mode: 'development',
  devtool: 'inline-source-map',
  performance: {
    hints: false,
  },
  entry: { main: `${paths.srcClient}/mainFile.js` },
  output: {
    path: paths.clientBuild,
    publicPath: paths.publicPath,
    filename: 'js/websiteB-[name]-[contenthash:8].js',
    libraryTarget: 'umd',
    jsonpFunction: 'webpackJsonp_websiteB',
    umdNamedDefine: true,
  },
  module: {
    rules: clientLoaders,
  },
  resolve: { ...resolvers },
  plugins: [...plugins.client],
  node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
    'styled-components': 'styled-components',
    axios: 'axios',
  },
  stats: {
    cached: false,
    cachedAssets: false,
    chunks: false,
    chunkModules: false,
    colors: true,
    hash: false,
    modules: false,
    reasons: false,
    timings: true,
    version: false,
  },
};

question from:https://stackoverflow.com/questions/65909752/webpack-output-jsonpfunction-fails-to-prevent-naming-colision

Answer 1

Waitting for answers