Can not use plugin

[ROXBOZ]

When installing the plugin with npm, I get this line in my dependencies

"sanity-plugin-country-state-select": "^1.0.1",

The import you give is import {countryStateListPlugin} from 'sanity-country-state-select' (also sanity-country... instead of sanity-plugin-country...

I can't use the plugin at all – whether I strictly follow the instructions or try adapting the import to the dependency name.

Here is the error log.

The desk tool crashed
Error: Cannot destructure property 'media' of 'theme.sanity' as it is undefined.
TypeError: Cannot destructure property 'media' of 'theme.sanity' as it is undefined.
    at responsiveFlexItemStyle (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:30951:11)
    at Fe (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1802:13)
    at http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1807:12
    at Array.map (<anonymous>)
    at Fe (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1806:144)
    at Fe (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1803:312)
    at e.generateAndInjectStyles (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1834:22)
    at http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1908:30
    at http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1910:8
    at O2 (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-country-state-select.js?v=2a7e931e:1914:6)

[mattobee]

I'm having the same problem. It looks like the same error has been raised as an issue in other plugins too.

[tea-vitamin]

Any update on this? Getting the same error @syedMSohaib

[talhaahmed09]

fixing this @tea-vitamin

[TreeMan360]

I have the same problem :(

Cannot destructure property 'media' of 'n.sanity' as it is undefined.

Need to use this now so going to roll-my-own 👍 Hope you get it resolved.

[TreeMan360]

If it helps anyone get by while the above is being fixed. I hacked this together and working well for my purposes:

import {SearchIcon} from '@sanity/icons'
import {Autocomplete, Box, Card, Flex, Text} from '@sanity/ui'
import {useCallback} from 'react'
import {StringInputProps, set, unset} from 'sanity'
import countries from 'world-countries'

export enum CountrySelectMode {
  CCA2,
  CCA3,
}

interface IProps extends StringInputProps {
  mode?: CountrySelectMode
}

export const CountrySelectInput: React.FunctionComponent<IProps> = ({
  mode = CountrySelectMode.CCA3,
  ...props
}) => {
  const {onChange, value = '', ...fwdProps} = props

  const handleChange = useCallback(
    (value: string) => onChange(value ? set(value) : unset()),
    [onChange]
  )

  return (
    <Card>
      <Autocomplete
        {...fwdProps}
        onChange={handleChange}
        value={value}
        filterOption={(query, option) =>
          option.payload.name.common.toLowerCase().indexOf(query.toLowerCase()) > -1
        }
        fontSize={[2, 2, 3]}
        icon={SearchIcon}
        openButton
        options={countries.map((country) => ({
          value: mode === CountrySelectMode.CCA2 ? country.cca2 : country.cca3,
          payload: country,
        }))}
        padding={[3, 3, 4]}
        placeholder="Type to find a country"
        renderOption={(option) => (
          <Card as="button">
            <Flex align="center">
              <Box padding={1}>
                <Text>{option.payload.flag}</Text>
              </Box>
              <Box flex={1} padding={2} paddingLeft={1}>
                <Text size={[2, 2, 3]}>
                  {option.payload.name.common}
                  {mode === CountrySelectMode.CCA2
                    ? ` (${option.payload.cca2})`
                    : ` (${option.payload.cca3})`}
                </Text>
              </Box>
            </Flex>
          </Card>
        )}
        renderValue={(value, option) => {
          const country = option?.payload
          return country
            ? `${country?.flag} ${country?.name.common} (${
                mode === CountrySelectMode.CCA2 ? country.cca2 : country.cca3
              })`
            : ''
        }}
      />
    </Card>
  )
}

[byekeen]

If it helps anyone get by while the above is being fixed. I hacked this together and working well for my purposes:

import {SearchIcon} from '@sanity/icons'
import {Autocomplete, Box, Card, Flex, Text} from '@sanity/ui'
import {useCallback} from 'react'
import {StringInputProps, set, unset} from 'sanity'
import countries from 'world-countries'

export enum CountrySelectMode {
  CCA2,
  CCA3,
}

interface IProps extends StringInputProps {
  mode?: CountrySelectMode
}

export const CountrySelectInput: React.FunctionComponent<IProps> = ({
  mode = CountrySelectMode.CCA3,
  ...props
}) => {
  const {onChange, value = '', ...fwdProps} = props

  const handleChange = useCallback(
    (value: string) => onChange(value ? set(value) : unset()),
    [onChange]
  )

  return (
    <Card>
      <Autocomplete
        {...fwdProps}
        onChange={handleChange}
        value={value}
        filterOption={(query, option) =>
          option.payload.name.common.toLowerCase().indexOf(query.toLowerCase()) > -1
        }
        fontSize={[2, 2, 3]}
        icon={SearchIcon}
        openButton
        options={countries.map((country) => ({
          value: mode === CountrySelectMode.CCA2 ? country.cca2 : country.cca3,
          payload: country,
        }))}
        padding={[3, 3, 4]}
        placeholder="Type to find a country"
        renderOption={(option) => (
          <Card as="button">
            <Flex align="center">
              <Box padding={1}>
                <Text>{option.payload.flag}</Text>
              </Box>
              <Box flex={1} padding={2} paddingLeft={1}>
                <Text size={[2, 2, 3]}>
                  {option.payload.name.common}
                  {mode === CountrySelectMode.CCA2
                    ? ` (${option.payload.cca2})`
                    : ` (${option.payload.cca3})`}
                </Text>
              </Box>
            </Flex>
          </Card>
        )}
        renderValue={(value, option) => {
          const country = option?.payload
          return country
            ? `${country?.flag} ${country?.name.common} (${
                mode === CountrySelectMode.CCA2 ? country.cca2 : country.cca3
              })`
            : ''
        }}
      />
    </Card>
  )
}

Thank you very much