Styles not Loading in Remix

[justinhandley]

Hi There - I'm sorry, I'm not sure how to replicate this in your code sandbox. I have a suspicion that this somehow relates to Remix and SSR, but can't get to the root of it.

Basically, the form, doesn't display properly. If you change something in code, and dev mode reloads the page, then everything shows correctly. If you do an actual browser load or refresh, the form styles don't load correctly.

Based on my research, I have tried waiting for hydration, and I've tried using a useEffect to make sure it only loads in the client to separate from SSR, but neither works.

This is the controlled form field that I'm rendering:

import { useQuery } from '@apollo/client'
import { Control, Controller, FieldValues } from 'react-hook-form'
import AsyncSelect from 'react-select/async'
import { CSSObjectWithLabel, GroupBase, OptionsOrGroups } from 'react-select'

interface OptionType {
  label: string
  value: string
}

interface OptionItem {
  id: string
  name?: string
  firstName?: string
  lastName?: string
}

interface RelationSelectProps {
  field: {
    key: string
    options: {
      document?: any // Specify the GraphQL document type if available
      dataType?: string
      filter?: (items: OptionItem[]) => OptionItem[]
      selectOptionsFunction?: (items: OptionItem[]) => OptionType[]
      multi?: boolean
    }
  }
  control: Control<FieldValues, unknown>
}

function label(item: { id: string; name?: string; firstName?: string; lastName?: string }): string {
  if (item?.name) {
    return item.name
  }
  if (item?.firstName && item?.lastName) {
    return `${item.firstName} ${item.lastName}`
  }
  if (item?.firstName && !item?.lastName) {
    return item.firstName
  }
  return item.id
}

function defaultOptionsMap(items: OptionItem[]): OptionType[] {
  return items?.map?.((option) => ({ value: `${option.id}`, label: label(option) }))
}

export function RelationSelect({ field, control }: Readonly<RelationSelectProps>) {
  const { data, loading, refetch } = useQuery(field.options.document)

  let dataList: OptionItem[] =
    field.options.dataType && !loading ? data?.[field.options.dataType] : [{ value: '', label: 'Loading...' }]

  if (field.options.filter && !loading) {
    dataList = field.options.filter(dataList)
  }

  function getDefaultOptions(
    dataList: any[],
    options: { selectOptionsFunction?: (data: any[]) => OptionType[] },
  ): OptionType[] {
    if (dataList && dataList.length > 0) {
      if (options.selectOptionsFunction) {
        return options.selectOptionsFunction(dataList)
      } else {
        return defaultOptionsMap(dataList)
      }
    } else {
      return [{ value: '', label: 'No Matching Data Found' }]
    }
  }

  async function getStorageOptions(inputText: string): Promise<OptionsOrGroups<OptionType, GroupBase<OptionType>>> {
    const res = await refetch({ input: { search: inputText } })
    const data = field.options.dataType ? res.data[field.options.dataType] : null
    return getOptions(data)
  }

  function getOptions(data: any): OptionType[] | OptionsOrGroups<OptionType, GroupBase<OptionType>> {
    if (data) {
      if (field.options.selectOptionsFunction) {
        return field.options.selectOptionsFunction(data)
      } else {
        return defaultOptionsMap(data)
      }
    } else {
      return [{ value: '', label: 'No Matching Data Found' }]
    }
  }

  const customStyles = {
    control: (provided: CSSObjectWithLabel) => ({
      ...provided,
      backgroundColor: 'white',
      fontSize: '14px',
    }),
    singleValue: (provided: CSSObjectWithLabel) => ({
      ...provided,
      fontSize: '14px',
      color: '#64748b',
    }),
    option: (provided: CSSObjectWithLabel) => ({
      ...provided,
      fontSize: '14px',
      color: '#64748b',
    }),
  }

  return (
    <Controller
      control={control}
      name={field.key}
      render={({ field: { onChange, value } }) => (
        <AsyncSelect
          name={field.key}
          instanceId={field.key}
          value={value}
          key={field.key}
          defaultOptions={getDefaultOptions(dataList, field.options)}
          loadOptions={getStorageOptions}
          onChange={onChange}
          isLoading={loading}
          isMulti={field.options.multi}
          classNamePrefix="rs"
          styles={customStyles}
        />
      )}
    />
  )
}

[TheAlexPorter]

I'm in the same boat. There are a few similar issues open. I'm going to attempt the solution here in #3309 (comment) and see if by making each component with my own styles manually applied I can get past the issue.

Others:

#5710

#3680

[TheAlexPorter]

Update: I tried the method here where you add an emotion provider and that did the trick! Wrapping my app with a CacheProvider is all I had to do.

I don't like that I had to add an extra provider for styling I'm not using directly, but this beats the pain of having to migrate away from react-select.

Here is the snippet from my remix app:

// root.tsx

import createCache from '@emotion/cache'
import { CacheProvider } from '@emotion/react'

function AppWithProviders() {
	const data = useLoaderData<typeof loader>()
	const cache = createCache({
		key: 'test',
		prepend: false,
	})

	return (
		<HoneypotProvider {...data.honeyProps}>
			<CacheProvider value={cache}>
				<UserDataProvider
					data={{
						user: data.user,
						theme: data.requestInfo.userPrefs.theme,
					}}
				>
					<App />
				</UserDataProvider>
			</CacheProvider>
		</HoneypotProvider>
	)
}

From this Isssue: #3680 (comment)

I hope this helps!

[justinhandley]

Hey @TheAlexPorter - thanks so much for that - I did try wrapping the whole root of my app in an emotion provider and it didn't seem to have any effect. Is there anything else that you had to do to make this work? Do I have to consume the provider somewhere?

[TheAlexPorter]

I don't do anything other than wrap my app with the cache provider 🤔 The only other thing I did before attempting these solutions was upgrade react to 18.3.1 and remix-run to 2.10.3

[grohart]

Same problem here with Astro JS (strangely, it's working well in my Remix projects), when using Astro with ViewTransitions component in the page layout headers, styles of react-select are broken when navigating to another page and going back to the page where react-select is called

[vemonet]

That's the problem with those react projects relying on overly complex dependencies like emotion for doing super simple things like basic styling, it gets really unstable over time

I have a hard time to see how you even need this emotion dependency here, when you have perfectly fine web standards for defining styles that does not requires overly complex dependencies that breaks all over the place + you have JSX to make it conditional

Behavior is not even consistent... In our case on remix it works sometimes, sometimes it does not, depending on the browser and how you access the page (direct reload vs coming from another page).

Always try to keep it simple and low in dependencies!

And from the number of issues + PR this project does not really seems really maintained (which is understandable). And regarding number of issues + PRs + frequencies or recent commits emotion is also not maintained anymore. So this project is now condemned to not work in the future due to its heavy dependencies

Now I guess we just need to rewrite this select component directly. Good thing it's quite basic, it will not take much time but yeah, remember to always try to use web standards instead of overly complex dependencies for simple things like applying styles...

[wowawiwa]

On my end, React Select can work / not work depending on:

1. Browser extension: In dev, on Firefox, having Bitwarden extension makes the problem appear. Disabling Bitwarden fixes the problem.
2. In production, even with Bitwarden disabled, the problem is there.

This repository shows a minimal setup where I only created a new Remix app and installed React Select, and you can see it failing in Firefox with the Bitwarden extension.

[wowawiwa]

I got it clearer:

• The problem actually happens when re-rendering of the <head> tag (see demo in the repo)
• It just so happens that the Bitwarden causes an hydratation error Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering which causes the re-rendering of the head tag that I mention above.

[i-bsd]

Same problem here with Astro JS (strangely, it's working well in my Remix projects), when using Astro with ViewTransitions component in the page layout headers, styles of react-select are broken when navigating to another page and going back to the page where react-select is called

Did you find a solution to this? I'm having the same problem with Astro.

[grohart]

Did you find a solution to this? I'm having the same problem with Astro.

Unfortunately no, I've given up react-select and I use the package tom-select instead which has the same functionalities as those I was looking for in react-select.

Anyway, I'm gradually abandoning React in favor of Svelte. I know this isn't really the place, feel free to delete my post in that case, but if anyone's interested, here is a Svelte component I've written to use tom-select (up to you to improve or adapt this code to React):

<script lang="ts">
  import { onMount } from "svelte";
  import TomSelect from 'tom-select';
  import "tom-select/dist/css/tom-select.default.css";
  let {
    options = {},
    name = '',
    selectedValues = [],
    placeholder = "Select...",
    noResultMessage = "No result"
  } = $props<{
    options: any;
    name: string;
    selectedValues: any;
    placeholder: string;
    noResultMessage: string;
  }>();

  let selectElement: HTMLSelectElement;
  let isHydrated = $state<boolean>( false );
  let tom = $state<TomSelect>();

  onMount( () => {
    tom = new TomSelect( selectElement, {
      items: selectedValues,
      create: false,
      placeholder: `▼ ${ placeholder }`,
      hidePlaceholder: true,
      hideSelected: false,
      maxOptions: undefined,
      plugins: {
        remove_button:{
          title: 'Remove',
        },
        clear_button:{
          title:'Remove all selected options',
          html: ( data: any ) => `
            <button class="${ data.className }" title="${ data.title }">
              <em class="fa fa-fw fa-delete-left"></em>
            </button>
          `
        },
        caret_position: true,
        input_autogrow: true
      },
      onClear: () => {
        tom?.close();
        selectedValues = [];
      },
      onInitialize: () => isHydrated = true,
      onItemAdd: ( value: string ) => selectedValues.push( value ),
      onItemRemove: ( value: string | number ) => selectedValues = selectedValues.filter( ( v: string | number ) => {
        return v.toString() !== value.toString();
      } ), 
      render: {
        option: ( data: any, escape: any ) => {
          const isSelected = selectedValues.includes( data.value );
          return `
            <div class="tom-option ${ isSelected ? 'selected' : '' }">
              ${ escape( data.text ) }
            </div>
          `;
        },
        no_results: () => `
          <div class="no-results">
            ${ noResultMessage }
          </div>
        `,
        item: ( data: any, escape: any ) => `
          <div class="tom-item">
            ${ escape( data.text ) }
          </div>
        `
      }
    } );
  } );
</script>

<div class:not-hydrated={ !isHydrated }>
  <select
    bind:this={ selectElement }
    name={ !isHydrated ? name : undefined }
    size={ 1 }
    multiple
    class="h-16"
  >
    {#if !isHydrated}
    <option
      value=""
      class="h-full"
    >{@html placeholder}</option>
    {/if}
    {#each options as option}
    <option
      value={ option.value }
      selected={ !isHydrated && selectedValues.includes( option.value ) }
    >
      {@html option.label}
    </option>
    {/each}
  </select>
</div>
{#each selectedValues as item, index}
<input
  type="hidden"
  name={ `${ name }[${ index }]` }
  value={ item }
/>
{/each}

<style lang="postcss">
  :global(.tom-option.selected) {
    @apply bg-blue-500 text-slate-100;
  }
  :global(.tom-item) {
    @apply h-1/2;
  }
  :global(.ts-control) {
    @apply overflow-y-auto;
    :global(input) {
      @apply placeholder:text-xs placeholder:text-gray-500;
    }
  }
 .not-hydrated select {
    @apply input input-bordered w-full;
  }
</style>

<Select
  client:load
  options={ options_object }
  selectedValues={ values_object }
  name={ key_string }
  placeholder={ placeholder_string }
  noResultMessage={ message_string }
/>

[i-bsd]

Did you find a solution to this? I'm having the same problem with Astro.

Unfortunately no, I've given up react-select and I use the package tom-select instead which has the same functionalities as those I was looking for in react-select.

Anyway, I'm gradually abandoning React in favor of Svelte. I know this isn't really the place, feel free to delete my post in that case, but if anyone's interested, here is a Svelte component I've written to use tom-select (up to you to improve or adapt this code to React):

I just spent all day switching out my react-select components to Svelte (using svelte-select). It's excellent, but not yet up-to-date with Svelte 5 so not sure about its longevity.

Hopefully someone finds a fix for react-select and Astro. Haven't heard of tom-select either. I'll take a look.