I'm working with a package @lifi/widget, it requires extra transpilation to import css files for it's components etc.

To do this they recommend I add transpilePackages: ['@lifi/widget', '@lifi/wallet-management'] to my next.config.js file.

This is acceptable to me for production, but for development it slows down the build time significantly. The number of compiled packages goes from 8088 to 22499.

To resolve this I added dynamic loading with dynamic importing with next/dynamic and React.lazy.

  const LiFiWidgetNext = lazy(() => {
  if (ENV.NODE_ENV === 'production') {
    return import('./Widget')
  } else {
    return import('./Placeholder')
  }
  })

  // also this 

  const LiFiWidget = dynamic(
  () =>
    ENV.NODE_ENV === 'production'
      ? import('~/ui/Bridge/Lifi').then((m) => m.LiFiWidget)
      : import('~/ui/Bridge/Lifi/Placeholder').then((m) => m.default),
  { ssr: false })
  

I expect that ENV.NODE_ENV === 'production' will be true only in production, so there will be no need to compile the packages but this is not true and next.js still tries to compile the packages and fails because I disabled transpilePackages options in dev mode.

TLDR: How do I make next.js not compile the packages I don't need in dev mode, while using dynamic imports.