CODEWITHSUNDEEP
reactjstypescript
Matt Thomas
Matt Thomas

Reputation: 1115

Imported function undefined when used with defaultProps

I have a function called createTheme. Inside of createTheme there is a function called createVariation whose last argument is buttonIteratee.

If buttonIteratee is in the same file as createTheme I have no issue. But once I move it into another file (button.tsx) I get an error and iteratee becomes undefined:

iteratee is not a function

An important note might be, this only happens when I try to use createTheme to set the property as a default prop.

I'm wondering if this has something todo with circular dependencies?

createTheme.ts

// WHEN IMPORTED, IT DOESN'T.    
import { buttonIteratee } from '../Button/Button';

// WHEN DEFINED IN SAME FILE, IT WORKS.
const buttonIteratee = (theme, value) => ({
  backgroundColor: value,
});

export const createTheme = (theme: Theme): Theme => {
  const mergedTheme = merge(theme, defaultTheme);

  mergedTheme.buttonVariants = createVariation('colors', theme, buttonIteratee);

  return mergedTheme;
};

Button.tsx

Button.defaultProps = {
    ...
    theme: createTheme(defaultTheme),
};

Here is createVariation if that helps

export const createVariation = (
  path: keyof Theme,
  theme: Theme,
  iteratee: (theme: Theme, value: string) => CSSProperties,
): { [key: string]: CSSProperties } => {
  const properties = get(theme, path, {});
  const flattened: { [key: string]: string | number } = dotify(properties);
  return Object.entries(flattened).reduce((accumulator, [key, value]) => {
    const conversion: string = typeof value === 'number' ? `${value}px` : value;
    return { [key]: iteratee(theme, conversion), ...accumulator };
  }, {});
};

Upvotes: 0

Views: 38

Answers (1)

Andy Mai
Andy Mai

Reputation: 94

You need to export buttonIteratee from Button.tsx in order to use it.

Upvotes: 1

Related Questions