Cannot read property 'split' of undefined (error with new Grid stuff)

[lostpebble]

Just updated some of my packages today and noticed this error off the bat:

TypeError: Cannot read property 'split' of undefined
    at gridColumn (C:\dev\_projects\vibescout-web-workspace\node_modules\inline-style-prefixer\lib\plugins\grid.js:32:36)
    at Array.grid (C:\dev\_projects\vibescout-web-workspace\node_modules\inline-style-prefixer\lib\plugins\grid.js:110:5)
    at prefixValue (C:\dev\_projects\vibescout-web-workspace\node_modules\inline-style-prefixer\lib\utils\prefixValue.js:9:36)
    at prefix (C:\dev\_projects\vibescout-web-workspace\node_modules\inline-style-prefixer\lib\createPrefixer.js:52:57)
    at C:\dev\_projects\vibescout-web-workspace\node_modules\fela-plugin-prefixer\lib\index.js:36:65
    at objectReducer (C:\dev\_projects\vibescout-web-workspace\node_modules\fast-loops\lib\objectReduce.js:9:20)
    at addVendorPrefixes (C:\dev\_projects\vibescout-web-workspace\node_modules\fela-plugin-prefixer\lib\index.js:32:37)
    at C:\dev\_projects\vibescout-web-workspace\node_modules\fela-utils\lib\processStyleWithPlugins.js:19:14
    at arrayReduce (C:\dev\_projects\vibescout-web-workspace\node_modules\fast-loops\lib\arrayReduce.js:9:20)
    at processStyleWithPlugins (C:\dev\_projects\vibescout-web-workspace\node_modules\fela-utils\lib\processStyleWithPlugins.js:18:38)
    at Object.renderer._renderStyle (C:\dev\_projects\vibescout-web-workspace\node_modules\fela-monolithic\lib\index.js:108:65)
    at Object.renderer.renderRule (C:\dev\_projects\vibescout-web-workspace\node_modules\fela-monolithic\lib\index.js:100:21)
    at css (C:\dev\_projects\vibescout-web-workspace\node_modules\react-fela\lib\useFela.js:28:21)
    at css (C:\dev\_projects\vibescout-web-workspace\node_modules\@gt\gt-frontend\src\react\vibescout-ui\fela/FelaLayers.tsx:78:55)
    at processChild (C:\dev\_projects\vibescout-web-workspace\node_modules\react-dom\cjs\react-dom-server.node.development.js:2871:14)
    at resolve (C:\dev\_projects\vibescout-web-workspace\node_modules\react-dom\cjs\react-dom-server.node.development.js:2795:5)

I have a Fela rule where I pass a lot of things of which some properties are allowed to be undefined - which are then forgotten in the regular behaviour. I use the fela plugin for inline style prefixing. But it seems that for the grid rules, there is no check being run to ignore prefixing on undefined values:

export default function grid(
  property: string,
  value: any,
  style: Object
): ?Array<string> {
  if (property === 'display' && value in displayValues) {
    return displayValues[value]
  }

  if (property in propertyConverters) {
    const propertyConverter = propertyConverters[property]
    propertyConverter(value, style)
  }
}

So this property converter is throwing an error:

gridColumn: (value: any, style: Object) => {
    if (isSimplePositionValue(value)) {
      style.msGridColumn = value
    } else {
      const [start, end] = value.split('/').map(position => +position)
      propertyConverters.gridColumnStart(start, style)
      propertyConverters.gridColumnEnd(end, style)
    }
  },

If you're curious what my rule looks like:

export const FelaRuleFlexbox: TFelaRule<IFelaFlexboxProps> = ({
  basis,
  align,
  direction,
  justify,
  wrap,
  grow,
  shrink,
  overflow,
  zIndex,
  position = "relative",
  alignSelf,
  justifySelf,
  gridColumn,
  gridRow,
  padding,
  margin,
}) =>
  ({
    position,
    zIndex,
    display: "flex",
    overflow,
    flexBasis: basis,
    alignItems: align,
    flexDirection: direction,
    justifyContent: justify,
    flexWrap: wrap,
    flexGrow: grow,
    flexShrink: shrink,
    transition: "background 0.15s ease-out, box-shadow 0.15s ease-out, color 0.15s ease-out",
    alignSelf,
    justifySelf,
    gridColumn,
    gridRow,
    padding,
    margin,
    ...position === "sticky" && {
      top: 0,
    },
  } as Properties);

All those parameters passed in are optional. Haven't had an issue until the recent update to inline-style-prefixer.

I guess this could be seen as an issue in fela-plugin-inline-style-prefixer. But I think the prefixer should be smart enough to ignore undefined values (or at least throw a decent error).

[lostpebble]

So I actually had some incorrect properties defined on a rule meant only for flex box css.

I removed the:

gridColumn,
gridRow,

And all seems fine now. Still, it never threw an error before and its a little strange that it does now (setting too many css rules incorrectly shouldn't be cause for error).

[robinweser]

Sorry for being that late with the response. Didn't see that issue at all. Yet, I'm still open for a PR with check for string or number.

[matthewharwood]

@robinweser I don't think this is the same error as it was made last year. But the error message is the same. 5.1.1 seemingly had a regression.

more details here: https://github.com/robinweser/inline-style-prefixer/pull/186

[robinweser]

@matthetherington Would you be willing to add a PR adding a string check before that .split call happens? I won't get to it before Wednesday otherwise.

[matthewharwood]

@robinweser https://github.com/robinweser/inline-style-prefixer/pull/190 here you go Maybe not the most concise code but tests are passing

[matthewharwood]

We can close this now I think.

[lostpebble]

Hi, I'm realizing that this issue is actually not fixed.

I was previously passing a default empty string "" as gridColumn or gridRow when it was undefined as a prop passed into a fela rule. But if I return a fela rule with undefined for either of those, I get this error still.

TypeError: Cannot read property 'split' of undefined

This doesn't happen with other properties as far as I know. (Fela just ignores them, as expected).

[ahmaddehnavi]

react-native-web crash with the same error on flex related stuff.

https://github.com/necolas/react-native-web/issues/2081

one case is when the 'flex' value is a negative value.