tamagui: new Proxy target must be an Object

Hi I’m getting the following error “new Proxy target must be an Object” while trying the docs samples for a Checkbox. Sometimes it renders and error throws on checkbox click

import {Check as CheckIcon} from '@tamagui/lucide-icons';
import {Checkbox, Label, SizeTokens, XStack} from 'tamagui';

const CheckboxWithLabel = (props: {
  size: SizeTokens;
  defaultChecked?: boolean;
}) => {
  const id = `checkbox-${props.size.toString().slice(1)}`;
  return (
    <XStack width={300} alignItems="center" space="$4">
      <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>
        <Checkbox.Indicator>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox>
      <Label size={props.size} htmlFor={id}>
        Accept terms and conditions
      </Label>
    </XStack>
  );
};

export default CheckboxWithLabel;

imagen_1386

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 30 (6 by maintainers)

Most upvoted comments

@kabeza

The fix for me was to use Webpack’s resolve.mainFields config property and set it to ['browser', 'main'] so it ignored the ESM distribution, based on these fields in packages/web/package.json.

sudo-at-night on Jun 16, 2023

I too had the same error.

I just followed the steps to remove node_modules and package-lock and ran npm install again.

After a few times of reloading the app, it finally worked. I also ran the app with npm run android -- --clear to clear any cache.

My Tamagui version in my package.json is ^1.50.2.

It sounds like it might be a specific version of Tamagui that is causing this and clearing the node_modules and package-lock is forcing a new version install?

stretch0 on Aug 16, 2023

@kabeza @Brettm12345 @basicserge @mjphillips-sg

Hey all 👋

I’m just checking in to say the problem on my end has been fixed.

Apparently, with my Storybook setup, the issue was that:

both CJS and ESM modules ran at the same time
CJS triggered initialisation of Tamagui’s config
ESM version of Tamagui’s useMedia hook tried reading that config, but it was undefined
the new Proxy(state, ..) call failed because state === undefined

The proxy call: https://github.com/tamagui/tamagui/blob/81bd844557e16d7e92331ca739872629fa6829a9/packages/web/src/hooks/useMedia.tsx#L201

The fix was forcing webpack to ONLY use CJS when compiling for Storybook.

sudo-at-night on Jun 15, 2023

@basicserge I think this is related to lock files. I removed all the lock files, node_modules and reinstalled. I got it working again.

mjphillips-sg on Jun 7, 2023

@sudo-at-night I still haven’t been able to solve the problem

As asked by @natew I’ve just uploaded a testing repo. This repo is where I’m getting the error so hope someone can point to the solution by trying it https://github.com/tamagui/tamagui/issues/1167#issuecomment-1567059244

kabeza on Jun 5, 2023

@kabeza please upgrade to 1.29.2 and see if it fixes your issue, if it does please close the bug.

I removed node_modules
I deleted package-lock.json
I changed tamagui and all its related package versions from “^1.26.0” to “^1.29.2”
executed npm install again
npm run dev && npx react-native run-android

Now I see the checkbox. But when I click it I keep getting the error

imagen_1406

imagen_1407

kabeza on May 23, 2023