Common js error while working in remix js

[ArnabChatterjee20k]

SyntaxError: Named export 'HuePicker' not found. The requested module 'react-color' is a CommonJS module, which may not support all module.exports as named exports.
What can be the work around?
I am using

import pkg from 'react-color';
const { HuePicker } = pkg;

but getting error

[tannerhallman]

I seem to have gotten around this by adding the package to ssr.optimizeDeps section in the vite.config.js

react-router 7.0.2

import path from 'path';

import tsconfigPaths from 'vite-tsconfig-paths';
import { reactRouter } from '@react-router/dev/vite';
import { defineConfig,} from 'vite';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      reactRouter(),
    ],
    ssr: {
      optimizeDeps: {
        include: [
          'lodash',
          '@mui/icons-material',
          '@mui/material/utils',
          'react-color'
        ],
      },
      noExternal: [
        /^@mui\//,
        'lodash',
        '@mui/icons-material',
        '@mui/material/utils',
        'react-dropzone',
        'react-color',
      ],
    },
  };
});