core: Breaking change to module sharing

BREAKING-CHANGE: Previously, we used to “rekey” all shared packages used in a host in order to prevent eager consumption issues. However, this caused unforeseen issues when trying to share a singleton package, as the package would end up being bundled multiple times per page.

As a result, we have had to stop rekeying shared modules in userland and only do so on internal Next packages themselves.

If you need to dangerously share a package using the old method, you can do so by using the following code:

             ```js
             const shared = {
               fakeLodash: {
                 import: "lodash",
                 shareKey: "lodash",
               }
             }
             ```

Please note that this method is now considered dangerous and should be used with caution.

BREAKING CHANGE: Previously, we used to “rekey” all shared packages used in a host in order to prevent eager consumption issues. However, this caused unforeseen issues when trying to share a singleton package, as the package would end up being bundled multiple times per page.

Fixing eager issues

To fix eager sharing issues, you need to ensure theres a async import BEFORE the first sync import of a shared module. This is common outside of next where we use import('./bootsrtap') in the entrypoint.

To do the same in next.js, theres a few options:

const page = import('../async-pages/checkout');

const Page = dynamic(() => import('../async-pages/checkout'));
Page.getInitialProps = async ctx => {
  const getInitialProps = (await page).default?.getInitialProps;
  if (getInitialProps) {
    return getInitialProps(ctx);
  }
  return {};
};

or any of the next data conventions.

const page = import('../async-pages/checkout');

const Page = dynamic(() => import('../async-pages/checkout'));
export const getServerSideProps = async ctx => {
  const getServerSideProps = (await page).getServerSideProps
  if (getServerSideProps) {
    return getServerSideProps(ctx);
  }
  return {};
};

You can also use the plugins built in “automatic async boundary”, which dynamic re-exports pages for you instead of manually like shown above. DO NOT use dynamic re-exports AND boundaryLoader, boundaryLoader does this automatically - if you do it as well - it will be double re-exported

{
  extraOptions: {
    automaticAsyncBoundary:true
  }
}