Menu, Dialog & ComboBox cause Expo React-native-web app to crash in Chrome

[prabir-vora]

Hi I am using NativeWind to support Tailwind UI for my Expo React-native-web project. I am able to get the classNames to work and also basic elements such as Switch, Menu (without styling & transitions), and Transition to work. However, when I try to use components from Tailwind UI which include create Dropdowns, Search Inputs, etc, my app on Chrome crashes. I am attaching code for a sample Combobox I am using in my code.

Combobox

export default function Example() {
  const [query, setQuery] = useState('')

  const [open, setOpen] = useState(true)

  const filteredPeople =
    query === ''
      ? []
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Transition.Root show={open} as={Fragment} afterLeave={() => setQuery('')} appear>
      <Dialog as="div" className="relative z-10" onClose={setOpen}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0 scale-95"
            enterTo="opacity-100 scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
            <Dialog.Panel className="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
              <Combobox onChange={(person) => (window.location = person.url)}>
                <div className="relative">
                  <MagnifyingGlassIcon
                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400"
                    aria-hidden="true"
                  />
                  <Combobox.Input
                    className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm"
                    placeholder="Search..."
                    onChange={(event) => setQuery(event.target.value)}
                  />
                </div>

                {filteredPeople.length > 0 && (
                  <Combobox.Options static className="max-h-72 scroll-py-2 overflow-y-auto py-2 text-sm text-gray-800">
                    {filteredPeople.map((person) => (
                      <Combobox.Option
                        key={person.id}
                        value={person}
                        className={({ active }) =>
                          classNames('cursor-default select-none px-4 py-2', active && 'bg-indigo-600 text-white')
                        }
                      >
                        {person.name}
                      </Combobox.Option>
                    ))}
                  </Combobox.Options>
                )}

                {query !== '' && filteredPeople.length === 0 && (
                  <p className="p-4 text-sm text-gray-500">No people found.</p>
                )}
              </Combobox>
            </Dialog.Panel>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root>
  )
}

As I open the combobox, my app crashes on Chrome with the following error messages

1. The above error occurred in the <input> component:

    at input
    at http://localhost:19006/static/js/bundle.js:74297:8424
    at Styled (http://localhost:19006/static/js/bundle.js:339589:33)
    at http://localhost:19006/static/js/bundle.js:339491:24
    at div
    at C (http://localhost:19006/static/js/bundle.js:75189:269)
    at http://localhost:19006/static/js/bundle.js:74297:3096
    at div
    at http://localhost:19006/static/js/bundle.js:74357:9333
    at Styled (http://localhost:19006/static/js/bundle.js:339589:33)
    at http://localhost:19006/static/js/bundle.js:339491:24
    at C (http://localhost:19006/static/js/bundle.js:75189:269)
    at http://localhost:19006/static/js/bundle.js:74699:2655
    at http://localhost:19006/static/js/bundle.js:74699:7933
    at div
    at div
    at div
    at http://localhost:19006/static/js/bundle.js:74414:364
    at http://localhost:19006/static/js/bundle.js:74320:595
    at P (http://localhost:19006/static/js/bundle.js:75207:251)
    at http://localhost:19006/static/js/bundle.js:74582:2502
    at http://localhost:19006/static/js/bundle.js:74582:1034
    at P (http://localhost:19006/static/js/bundle.js:75207:251)
    at C (http://localhost:19006/static/js/bundle.js:75228:267)
    at http://localhost:19006/static/js/bundle.js:74357:870
    at C (http://localhost:19006/static/js/bundle.js:75189:269)
    at http://localhost:19006/static/js/bundle.js:74699:2655
    at http://localhost:19006/static/js/bundle.js:74699:5769
    at div
    at SidebarNavigation (http://localhost:19006/static/js/bundle.js:54919:73)
    at Home (http://localhost:19006/static/js/bundle.js:610967:25)
    at StaticContainer (http://localhost:19006/static/js/bundle.js:102981:16)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:102523:23)
    at SceneView (http://localhost:19006/static/js/bundle.js:102871:21)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at CardSheet (http://localhost:19006/static/js/bundle.js:113595:22)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at AnimatedComponent (http://localhost:19006/static/js/bundle.js:456273:83)
    at AnimatedComponentWrapper
    at Dummy (http://localhost:19006/static/js/bundle.js:112082:23)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at AnimatedComponent (http://localhost:19006/static/js/bundle.js:456273:83)
    at AnimatedComponentWrapper
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at Card (http://localhost:19006/static/js/bundle.js:112803:81)
    at CardContainer (http://localhost:19006/static/js/bundle.js:113311:33)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at NativeScreen (http://localhost:19006/static/js/bundle.js:440593:81)
    at AnimatedComponent (http://localhost:19006/static/js/bundle.js:456273:83)
    at AnimatedComponentWrapper
    at MaybeScreen (http://localhost:19006/static/js/bundle.js:112653:23)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at MaybeScreenContainer (http://localhost:19006/static/js/bundle.js:112641:22)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at Background (http://localhost:19006/static/js/bundle.js:106767:20)
    at CardStack (http://localhost:19006/static/js/bundle.js:113801:81)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at SafeAreaProviderCompat (http://localhost:19006/static/js/bundle.js:107888:23)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at StackView (http://localhost:19006/static/js/bundle.js:114271:81)
    at PreventRemoveProvider (http://localhost:19006/static/js/bundle.js:102767:24)
    at NavigationContent (http://localhost:19006/static/js/bundle.js:104437:21)
    at http://localhost:19006/static/js/bundle.js:104449:26
    at StackNavigator (http://localhost:19006/static/js/bundle.js:111657:17)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:102523:23)
    at BaseNavigationContainer (http://localhost:19006/static/js/bundle.js:102156:27)
    at ThemeProvider (http://localhost:19006/static/js/bundle.js:108869:20)
    at NavigationContainerInner (http://localhost:19006/static/js/bundle.js:108305:25)
    at Navigation (http://localhost:19006/static/js/bundle.js:57985:26)
    at LanguageProvider (http://localhost:19006/static/js/bundle.js:57502:23)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at MenuProvider (http://localhost:19006/static/js/bundle.js:416556:7)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at NativeSafeAreaProvider (http://localhost:19006/static/js/bundle.js:440002:23)
    at SafeAreaProvider (http://localhost:19006/static/js/bundle.js:440198:23)
    at AppContextProvider (http://localhost:19006/static/js/bundle.js:54261:20)
    at ApolloProvider (http://localhost:19006/static/js/bundle.js:64555:21)
    at App (http://localhost:19006/static/js/bundle.js:1041:100)
    at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:165835:83)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at DevAppContainer (http://localhost:19006/static/js/bundle.js:165462:81)
    at div
    at http://localhost:19006/static/js/bundle.js:449033:25
    at AppContainer (http://localhost:19006/static/js/bundle.js:442030:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
overrideMethod @ react_devtools_backend.js:4026
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
flushSyncCallbacksOnlyInLegacyMode @ react-dom.development.js:11961
batchedUpdates$1 @ react-dom.development.js:25987
batchedUpdates @ react-dom.development.js:3984
dispatchEventForPluginEventSystem @ react-dom.development.js:9257
dispatchEvent @ react-dom.development.js:6435
dispatchDiscreteEvent @ react-dom.development.js:6410
react-dom.development.js:2822

2.  Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.
    at setValueForStyles (react-dom.development.js:2822:1)
    at setInitialDOMProperties (react-dom.development.js:9659:1)
    at setInitialProperties (react-dom.development.js:9892:1)
    at finalizeInitialChildren (react-dom.development.js:10921:1)
    at completeWork (react-dom.development.js:19368:1)
    at completeUnitOfWork (react-dom.development.js:26431:1)
    at performUnitOfWork (react-dom.development.js:26403:1)
    at workLoopSync (react-dom.development.js:26303:1)
    at renderRootSync (react-dom.development.js:26271:1)
    at performSyncWorkOnRoot (react-dom.development.js:25924:1)
    at flushSyncCallbacks (react-dom.development.js:11982:1)
    at flushSyncCallbacksOnlyInLegacyMode (react-dom.development.js:11961:1)
    at batchedUpdates$1 (react-dom.development.js:25987:1)
    at batchedUpdates (react-dom.development.js:3984:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9257:1)
    at dispatchEvent (react-dom.development.js:6435:1)
    at dispatchDiscreteEvent (react-dom.development.js:6410:1)
setValueForStyles @ react-dom.development.js:2822
setInitialDOMProperties @ react-dom.development.js:9659
setInitialProperties @ react-dom.development.js:9892
finalizeInitialChildren @ react-dom.development.js:10921
completeWork @ react-dom.development.js:19368
completeUnitOfWork @ react-dom.development.js:26431
performUnitOfWork @ react-dom.development.js:26403
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
performSyncWorkOnRoot @ react-dom.development.js:25924
flushSyncCallbacks @ react-dom.development.js:11982
flushSyncCallbacksOnlyInLegacyMode @ react-dom.development.js:11961
batchedUpdates$1 @ react-dom.development.js:25987
batchedUpdates @ react-dom.development.js:3984
dispatchEventForPluginEventSystem @ react-dom.development.js:9257
dispatchEvent @ react-dom.development.js:6435
dispatchDiscreteEvent @ react-dom.development.js:6410

The app does run on Safari but the search bar styles don't apply as expected. Here is an image -

EXPECTED

ACTUAL

The same thing is happening with Dropdowns and Navigation Drawers too from Tailwind UI site. The Styles on key components Menu.Items & Popup.Dialog seem to be the reason behind the crash and error message on Chrome (I am assuming this based on the fact that not all the classnames these components have are applying on Safari).

My package versions are

"expo": "^46.0.10",
"@headlessui/react": "^1.6.6",
"@react-navigation/native": "^6.0.12",
"@react-navigation/stack": "^6.2.3",
"@tailwindcss/aspect-ratio": "^0.4.2",
"nativewind": "^2.0.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-native": "^0.69.5",
"react-native-web": "^0.18.7",
"postcss": "^8.4.16",
"postcss-loader": "^4.2.0",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.2",

My webpack.config is as follow:

var webpack = require('webpack');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync(
        {
            ...env,
            babel: {
                dangerouslyAddModulePathsToTranspile: ['nativewind'],
            },
        },
        argv
    );

    config.module.rules.push({
        test: /\.css$/i,
        use: ['postcss-loader'],
    });

    config.resolve.alias['react-native-webview'] = 'react-native-web-webview';

    config.resolve.alias['FroalaEditor'] = 'froala_editor.min.js/froala_editor.pkgd.min.js';

    config.resolve.modules = ['../node_modules/froala-editor/js', 'node_modules'];

    config.plugins.push(
        new webpack.ProvidePlugin({
            FroalaEditor: 'froala_editor.min.js/froala_editor.pkgd.min.js',
        })
    );

    return config;
};

My tsconfig.json is as follows:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "jsx": "react-native",
        "lib": ["dom", "esnext"],
        "moduleResolution": "node",
        "noEmit": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "strict": true
    },
    "extends": "expo/tsconfig.base"
}

My babel.config is as follows:

module.exports = function (api) {
    // api.cache.using(() => process.env.NODE_ENV);
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: ['react-native-reanimated/plugin', 'nativewind/babel'],
    };
};

Any help would be greatly appreciated!