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

[andreydro]

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.

[andreydro]

Solution found.

React-select does not every time works with SSR in Next.js, so dynamic import that allows turning off SSR for a particular component does the job. https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

[Rall3n]

@andreydro Which version of Next.js are you using?

[andreydro]

@Rall3n Next.js version 13.0.5

Select shows this error only in page file (inside Next.js folder pages/). Other components seems to work fine (in my case inside Modal of react-responsive-modal)

[Rall3n]

@andreydro Unfortunately I can't reproduce the problem with an example from Next.js.

Would you please be so kind and try to reproduce the issue using the following StackBlitz example (https://stackblitz.com/edit/github-kg48su)?

[tommymarshall]

Wanted to add that including any @emotion dependencies into my external array in vite.config.ts file resolved my issues (See example below).

import { resolve } from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import dts from 'vite-plugin-dts'
import svgrPlugin from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [dts(), react(), tsconfigPaths(), svgrPlugin()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'ui',
      formats: ['es', 'cjs'],
      fileName: (format) => `ui.${format}.js`,
    },
    outDir: 'dist',
    rollupOptions: {
      external: [
        'react',
        'styled-components',
        '@emotion/react',
        '@emotion/styled',
      ],
      output: {
        globals: {
          react: 'React',
          'styled-components': 'styled-components',
        },
        exports: 'named',
      },
    },
  },
  server: {
    https: false,
    open: false,
  },
})

[adamgreg]

I get the same error if I try to use react-select in Deno Fresh (SSR using preact-render-to-string). Is SSR expected to be supported?

[sgedye]

Hi there, I've come across this error too and I think it has to do with the node version. It breaks for me on server load (works fine on client load) with the same error: TypeError: Cannot read properties of null (reading 'registered')

When using node version 20.10.0, however if I roll back to node version 16.20.1 I no longer have this issue.

Hope this helps :)

[DmitryMasley]

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

I can't confirm the theory for now, have the same issue with node 16 and 18. Happens for me in tests (jest, JSDOM).

[zgrybus]

@adamgreg @DmitryMasley @sgedye @andreydro Hi guys. Have you managed to workaround this issue somehow? I don't really want to use dynamic 🤔

[andreydro]

@zgrybus No, for pages with SSR we use dynamic. For other places, it works without dynamic (for example for code in modal)

[zgrybus]

@zgrybus No, for pages with SSR we use dynamic. For other places, it works without dynamic (for example for code in modal)

so bad :( Thanks for reply! :)

[ursnj]

Any luck on this issue ???

[VadimKovalenkoSNF]

We faced with this problem while trying to test ReactSelect with Jest and jsdom.

Environment: NodeJS: 14.21.3 React: 16.13.1 react-select: 4.3.0 @testing-library/react: 12.1.5

[dclark27]

If you're using this in a component library, you can install emotion as a devDependency and externalize them in your vite.config.ts.

	"devDependencies": {
		"@emotion/react": "^11.11.4",
		"@emotion/styled": "^11.11.0",
	}

export default defineConfig({
	build: {
                 ...
		rollupOptions: {
			external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'],
			output: {
				globals: {
					react: 'React',
					'react-dom': 'ReactDOM',
					tailwindcss: 'tailwindcss',
				},
			},
		},
	},
});