search

DeloitteAU / react-habitat

⚛️ 🛅 A React DOM Bootstrapper designed to harmonise a hybrid 'CMS + React' application.
Other
261 stars 42 forks source link

Large component props are cut off #20

Closed nixolas1 closed 7 years ago

nixolas1 commented 7 years ago

When passing a large JSON string as a "data-prop-" to a react habitat component, it will be cut off after about 100.000 characters.

Data this happened with: https://gist.github.com/nixolas1/5eec33756cdd1ed70b7a22950be55600 It was cut off at the first occurence of "brand":"Bergby" Resulting in it not being read as JSON, but as a string, and breaking the application.

A workaround is storing the large JSON to a variable on window then passing that variable with "data-r-prop-" to the component.

jennasalau commented 7 years ago

Hey Nicolas,

Thanks for raising this issue. I'll look into replicating this and adding tests so that we can handle this a bit more gracefully. Glad you found a work around.

Had a quick google and it seems HTML4 has restrictions on HTML attribute lengths but HTML5 does not.

Can you confirm that you are using HTML5 and what browsers/OS you experienced this on?

nixolas1 commented 7 years ago

I was using Chrome 60.0.3112.90 (Official Build) (64-bit) on Windows 10 (up to date). Same issue in Firefox.

React-habitat versions:

"react-habitat": "^0.4.2",
"react-habitat-redux": "^1.0.2",

I'm not sure i understand what you mean with 'using html5', we are declaring the <!DOCTYPE html> on our site, sot there shouldn't be any html4 forcing going on.

jennasalau commented 7 years ago

Hi Nicolas,

I've taken a look at your sample data and replicated the issue. It seems like you are not escaping your single quotes.

For instance your backend system would need to replace all single quotes ' with its HTML entity encoding &#x27;. (I did this and it worked immediately).

This is a common gotcha when using JSON in html attributes, in fact there is a whole section documenting this in the upcoming release.

I would recommend you stick with using the data-r-prop however, your JSON is so large you are going to get better performance this way.

Let me know if you have any more issues.

nixolas1 commented 7 years ago

Ah, of course. Always dangerous with raw json into HTML. Thanks!