Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Received `true` for a non-boolean attribute `block`

See original GitHub issue

It seems like props are passed as an attribute and when I pass boolean, It throws error on the console. I am using next.js with typescript.

This is the error

Warning: Received `true` for a non-boolean attribute `block`.

If you want to write it to the DOM, pass a string instead: block="true" or block={value.toString()}.
button
functionTemplate/</<@webpack-internal:///./node_modules/tailwind-styled-components/dist/tailwind.js:34:101

Component looks like this

import tw from 'tailwind-styled-components';

interface Props {
  layout?: 'primary' | 'outline';
  disabled?: boolean;
  block?: boolean;
  size?: 'small' | 'medium' | 'large';
}

const Button = tw.button`
  flex justify-center items-center border border-solid font-medium rounded-sm transition-all duration-300 ease-in-out

  ${(props: Props) =>
    props.layout === 'primary' &&
    'border-primary-400 bg-primary-400 text-white hover:bg-primary-500 hover:border-primary-600'}
  ${(props: Props) =>
    props.layout === 'outline' &&
    'border-gray-300 text-gray-700 hover:border-blue-500 hover:text-blue-500'}

  ${(props: Props) =>
    props.disabled && 'bg-gray-50 border-gray-200 text-gray-200'}
    
  ${(props: Props) => props.size === 'small' && 'px-2 py-2 text-xs'}
  ${(props: Props) => props.size === 'medium' && 'px-4 py-3 text-xs'}
  ${(props: Props) => props.size === 'large' && 'px-5 py-4 text-lg'}
  
  ${(props: Props) => props.block && 'w-full'}
`;

export default Button;

The workaround is using number as boolean block ? 1 : 0