The `style` prop expects a mapping from style properties to values, not a string

Question

Created Sitecore 9 update 1 on Azure Web App using the Azure Marketplace. JSS packages have been installed successfully and also JSS deploy command successfully:

jss deploy package --includeContent --includeDictionary

But I keep getting this error:

The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
  in img
Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
  in img
  at invariant (D:\home\site\wwwroot\dist\myapp\server.bundle.js:873:15)
  at assertValidProps (D:\home\site\wwwroot\dist\myapp\server.bundle.js:9457:63)
  at ReactDOMServerRenderer.renderDOM (D:\home\site\wwwroot\dist\myapp\server.bundle.js:11177:5)
  at ReactDOMServerRenderer.render (D:\home\site\wwwroot\dist\myapp\server.bundle.js:11031:21)
  at ReactDOMServerRenderer.read (D:\home\site\wwwroot\dist\myapp\server.bundle.js:10967:19)
  at Object.renderToStaticMarkup

Kam and CharlesWood suggested to deploy with --env development but that didn't help either. https://sitecorechat.slack.com/archives/C7JT0NRQW/p1527930809000016

Answer 1

I reproduced this today and it will be resolved in the next JSS release.

The issue is caused by Sitecore emitting a style attribute on an image field in Layout Service, which JSS then passed through to the React component. React does not like string styles, so this is an error.

Style attributes are ignored as a workaround, as inline styles have no place coming from the API server.