ReferenceError: returnfalse is not defined

[bilalbutt044]

Hi. i am using "@headlessui/react": "^1.7.17" with "react": "17.0.1" and "next": "12.1.6",.

I am using combobox along Transition component It is working fine locally but when i create a build i get following error
ReferenceError: returnfalse is not defined

below is the code how i am using combobox and Transition

import { Fragment, useRef, useState } from "react";
import { Combobox as HeadlessCombobox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
import { cn } from "../../../utils/lib/utils";

export default function Combobox({
  options = [],
  onChange,
  defaultValue = [],
  multiple = false,
  containerClassName,
  selectedItemContainerClass,
  selectedItemClass,
  className,
}) {
  const [selected, setSelected] = useState(defaultValue);
  const [query, setQuery] = useState("");
  const ref = useRef();

  const handleFocus = () => ref?.current && ref.current.focus();

  const handleChange = (e) => {
    if (Array.isArray(e)) {
      if (onChange) onChange(e);
      setSelected(e);
      return;
    }

    if (onChange) onChange(e);
    setSelected([e]);
  };

  const handleRemoveSelected = (obj) => (e) => {
    const filteredItem = selected.filter(
      (item) => (item?.name || item?.label) !== (obj?.name || obj?.label)
    );
    if (onChange) onChange(filteredItem);
    setSelected(filteredItem);
  };

  const filteredOptions =
    query === ""
      ? options
      : options.filter((item) =>
          (item?.name || item?.label)
            .toLowerCase()
            .replace(/\s+/g, "")
            .includes(query.toLowerCase().replace(/\s+/g, ""))
        );

  return (
    <div className="w-full " onClick={handleFocus}>
      <HeadlessCombobox
        value={selected}
        onChange={handleChange}
        multiple={multiple}
      >
        <div className="relative z-50 ">
          <div className="flex gap-y-2 ">
            <div
              className={cn(
                "flex flex-wrap  w-full px-2 media-h-700:!h-10 !h-8 overflow-hidden text-left border rounded cursor-default bg-fill border-light-gray focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm",
                containerClassName
              )}
            >
              {selected.length > 0 && (
                <ul
                  className={cn(
                    "flex flex-wrap items-center gap-1 mr-2 cursor-pointer",
                    selectedItemContainerClass
                  )}
                >
                  {selected.map((item) => (
                    <li
                      key={item?.id}
                      className={cn(
                        "text-black-400 text-sm media-h-700:text-base bg-blue-default font-normal   px-2 rounded-lg flex items-center justify-center",
                        selectedItemClass
                      )}
                      onClick={handleRemoveSelected(item)}
                    >
                      {item?.label}
                      {multiple && <span className="mx-1">X</span>}
                    </li>
                  ))}
                </ul>
              )}
              <HeadlessCombobox.Input
                className={cn(
                  "text-sm leading-5 text-gray-900 outline-none bg-fill",
                  className
                )}
                displayValue={(person) => person.name}
                onChange={(event) => setQuery(event.target.value)}
                ref={ref}
              />
            </div>
            <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
              <ChevronsUpDownIcon
                className="w-5 h-5 text-gray-400"
                aria-hidden="true"
              />
            </HeadlessCombobox.Button>
          </div>
          <Transition
            as={Fragment}
            leave="transition  ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
            afterLeave={() => setQuery("")}
          >
            <HeadlessCombobox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
              {filteredOptions.length === 0 && query !== "" ? (
                <div className="relative px-4 py-2 text-gray-700 cursor-default select-none">
                  Nothing found.
                </div>
              ) : (
                filteredOptions.map((item) => (
                  <HeadlessCombobox.Option
                    key={item?.id}
                    className={({ active }) =>
                      `relative cursor-default z-50 select-none py-2 pl-10 pr-4 ${
                        active ? "bg-light-blue text-black" : "text-gray-900"
                      }`
                    }
                    value={item}
                  >
                    {({ selected, active }) => (
                      <>
                        <span
                          className={`block truncate ${
                            selected ? "font-medium" : "font-normal"
                          }`}
                        >
                          {item?.name || item?.label}
                        </span>
                        {selected ? (
                          <span
                            className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
                              active ? "text-white" : "text-teal-600"
                            }`}
                          >
                            <CheckIcon
                              className="w-5 h-5 text-black-800"
                              aria-hidden="true"
                            />
                          </span>
                        ) : null}
                      </>
                    )}
                  </HeadlessCombobox.Option>
                ))
              )}
            </HeadlessCombobox.Options>
          </Transition>
        </div>
      </HeadlessCombobox>
    </div>
  );
}

kindly let me know how i can make this work in production

Thanks

[szamanr]

i have a user running into something similar. could you repost this in issues? not sure if the team checks discussions.

do you still get this and is it also coming from prerol-inject.js? could it be related to some browser extension?

[rodoneill]

I get the same error with combobox in development, rolled back to 1.17.16

[bilalbutt044]

@rodoneill yes 1.17.16 works fine

[Makena-Maryann]

I also got the error above. Rolling back to 1.7.16 worked! Thanks @rodoneill

[jetaggart]

Seeing this on production as well. Any ideas what this is? crashing tons of pages for us

[thecrypticace]

@jetaggart are you using Next.js? If so, what version. This is a minfication bug. The line that causes this in Headless UI looks like this return!1 (b/c we ship minified code) which is 100% valid JS but if a tool replaces !1 with false without accounting for it's position in the tree (i.e. a simple search + replace) this breaks things because returnfalse isn't valid.

[bilalbutt044]

Downgraded to recent version it solved issue for me

…

On Wed, Dec 6, 2023, 12:37 AM Jeff ***@***.***> wrote: Seeing this on production as well. Any ideas what this is? crashing tons of pages for us — Reply to this email directly, view it on GitHub <#2790 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHFN5OCOLPBFJPB2X7OAOE3YH5ZWBAVCNFSM6AAAAAA5WCFFGSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TONRYGMYTO> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[jetaggart]

Digging a bit more, I think this is actually unrelated. There's a popular chrome extension https://chromewebstore.google.com/detail/adaway-free-ad-blocker/dgjbaljgolmlcmmklmmeafecikidmjpi which has the offending line in their source code. It appears to trigger on the code below in their helpers/background/prerol-inject.js file. I think it's related to trying to detect youtube video ads, and if you have an embedded video with no ads it short circuits and crashes with bad syntax "returnfalse". I'm not 100% as this code is a mess to read, but I feel like headless has nothing to do with this, nor is it some weird interaction between the two.

       }({
            name: "set-constant",
            args: ["playerResponse.adPlacements", "undefined"],
            ruleText: "youtube-nocookie.com,youtube.com#%#//scriptlet('set-constant', 'playerResponse.adPlacements', 'undefined')",
            domainName: "www.youtube.com",
            engine: "extension",
            version: "3.1.2"
        }, ["playerResponse.adPlacements", "undefined"]), e = function(n, t, r) {
            n || returnfalse;
            var i = !1;
            for (var o in n) n.hasOwnProperty(o) && o === t ? (n[o] = r, i = !0) : n.hasOwnProperty(o) && "object" == typeof n[o] && e(n[o], t, r) && (i = !0);
            return i
        }, (n = function(n, t) {

[jetaggart]

If we could all report/review that extension to get some awareness of this bug that'd be awesome!

[codemers]

I was having the same issue and downgrading to 1.7.16 fixed the issue.

[bilalbutt044]

just wanted to tell. before my problem was solved when I downgraded to 1.7.16 but from yesterday I started getting the same problem on production. while searching the solution I came back to this discussion again and downgraded to 1.7.15 which solves the issue.