react-select: Cannot read properties of null (reading 'registered')

Hi!

I use react-select (v 5.7) inside the package this way:

const ArgoSelect = ({ variant, ...props }) => {
  const ControlComponent = props => <Control variant={variant} {...props} />
  const MenuComponent = props => <Menu variant={variant} {...props} />
  const OptionComponent = props => <Option variant={variant} {...props} />
  const PlaceholderComponent = props => <Placeholder variant={variant} {...props} />
  const SingleValueComponent = props => <SingleValue variant={variant} {...props} />

  return (
    <Select
      closeMenuOnSelect={false}
      components={{
        Control: ControlComponent,
        IndicatorsContainer,
        Menu: MenuComponent,
        MenuList,
        Option: OptionComponent,
        Placeholder: PlaceholderComponent,
        SingleValue: SingleValueComponent
      }}
      {...props}
    />
  )
}

export default ArgoSelect

But when I try to use this component in a different project (as a package), then I get the following error:

Server Error
TypeError: Cannot read properties of null (reading 'registered')

This error happened while generating the page. Any console logs will be displayed in the terminal window.

It is happening even if I use Select without props

  <Select />

I think, something is wrong with my webpack config, but I don't know what. Other components that used external libraries are working fine. The problem is only with react-select lib

Here is my webpack config:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const CSSModuleLoader = {
  loader: 'css-loader',
  options: {
    modules: true,
    importLoaders: 2,
    sourceMap: false // turned off as causes delay
  }
}

const CSSLoader = {
  loader: 'css-loader',
  options: {
    modules: 'global',
    importLoaders: 2,
    sourceMap: false // turned off as causes delay
  }
}

const PostCSSLoader = {
  loader: 'postcss-loader',
  options: {
    sourceMap: false // turned off as causes delay
  }
}

const styleLoader = MiniCssExtractPlugin.loader

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  mode: 'production',
  entry: './src/index.js',
  externals: { react: 'react' },
  output: {
    path: path.resolve('dist'),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
    publicPath: ''
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /(node_modules)/,
        use: 'babel-loader'
      },
      {
        test: /\.(c)ss$/,
        exclude: /\.module\.(c)ss$/,
        use: [styleLoader, CSSLoader, PostCSSLoader, 'sass-loader']
      },
      {
        test: /\.module\.(c)ss$/,
        use: [styleLoader, CSSModuleLoader, PostCSSLoader, 'sass-loader']
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
}

Do not provide a sandbox link, because in the package Storybook component works fine, problems start after import into another project.

Start with the package's webpack configuration and the Select entry shown in the report, then compare how react-select and React are resolved when the package is imported into another project. Use the working Storybook component as a reference and verify that the consuming project can render Select without the null “registered” error.