Bug: Webpack build: in postcss Uncaught (in promise) TypeError: nanoid is not a function

[mhsdesign]

at node_modules/postcss/lib/input.js:58:1

With create-react-app in hmr mode - i dindt tests the build.

Seems to be related to the differences in cjs and esm see ai/nanoid#205

Looking at the working examples - esbuild seems to handle it well but not webpack

[chrisarts]

Im using vite for bundle which uses rollup and esbuild under the hood and I already test on CRA, vite, nextJS and even React Native (off course with a proper processor to transform styles to mobile) I use your config at first but now I have this:

/// <reference types="vitest" />
// Configure Vitest (https://vitest.dev/config/)
import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  test: {},
  plugins: [],
  optimizeDeps: {
    esbuildOptions: {
      minify: true,
      mainFields: ['module', 'main'],
    },
  },
  esbuild: {
    logLevel: 'info',
    define: {
      'process.env.DEBUG': 'undefined',
      'process.env.JEST_WORKER_ID': '1',
      __dirname: '"/"',
    },
    supported: {
      'nullish-coalescing': false,
      'optional-chain': false,
    },
  },
  logLevel: 'info',
  build: {
    reportCompressedSize: true,
    ssr: false,
    lib: {
      entry: path.resolve(__dirname, 'src/builds/module.ts'),
      name: '@universal-labs/native-tailwind',
      fileName: (format) => `index.${format}.js`,
      formats: ['cjs', 'es', 'umd', 'iife'],
    },
    rollupOptions: {
      external: [
        'postcss',
        'postcss-css-variables',
        'css-to-react-native',
        'postcss-js',
        'postcss-color-rgb',
      ],
      makeAbsoluteExternalsRelative: 'ifRelativeSource',
      treeshake: true,
      output: {
        dir: 'build',
        extend: true,
        externalImportAssertions: true,
      },
    },
  },
});