Category Archives: ReactJS

Unable to find a dom node for 19 – Slate.js

Hi everyone,

I ran into the following error while attempting to add an image to a slate.js editor today:

slate.js unable to find dom node for 19

The solution was to add a simple schema to my editor:

const schema = {
    blocks: {
        image: {
            isVoid: true
    onFocus={() => { this.setState({ changed: true }); }}

There’s more on schemas in the official documentation:


String to Color – Avatar Helpers

Hi everyone,

A quick post on a helper function I came across for generating avatars. This function generates a random color for the specified string:

export const stringToColor = string => {

let hash = 0;
let i;

for (i = 0; i < string.length; i += 1) {
hash = string.charCodeAt(i) + ((hash << 5) - hash);

let colour = '#';

for (i = 0; i > (i * 8)) & 0xff;
colour += `00${value.toString(16)}`.substr(-2);

return colour;

Thanks to oliviertassinari:

NavLink ListItems not Applying activeClassName class when Clicked On – ReactJS React-Router MaterialUI

Hi everyone,

A bit of a hairy issue I ran into today that took a while to track down. I’m using React Router with Material UI to render a Drawer as a sidebar:

The issue was that some links were not applying the expected activeclass:

	<ListItemText primary={
	} />

After trawling through react-router I eventually found a post on github that mentioned a similar issue:

The solution turned out to be wrapping all relevant components with withrouter.

Uncaught SyntaxError: Unexpected token < – ReactJS Build

Hi everyone,

A ReactJS issue I ran into after running npm run build:

Uncaught SyntaxError: Unexpected token <

This one took a while to track down but it essentially boils down to the built index.html file referencing paths relatively:

Issue: index.html was referencing

Instead of:

This meant that anytime a page was accessed directly it attempted to load the static files from the wrong directory. To fix it, I had to update the homepage node in package.json

"version": "0.1.0",
  "homepage": "./",
  "private": true,

Instead use:
"version": "0.1.0",
  "homepage": "/",
  "private": true,

Hopefully that’s able to help someone else out, took a while to track down!

npm ERR! missing script: flow npm ERR! A complete log of this run can be found in: – ReactJS and Flow

Hi everyone,

I ran into the following error while trying to setup flow:

npm ERR! missing script: flow
npm ERR! A complete log of this run can be found in:

To fix this, just add “flow”: “flow” as a new entry under “scripts” in your package.json file.

See the following link for more info:

Including an Externally Hosted Script in ReactJs

Hi everyone,

Just a quick example of how to include an externally hosted js file in a reactjs app. In index.html add your script tag as you would in a normal app:

Then in the file you plan to use the library you can add a const and reference it normally:

const promisepay = window.promisepay;

Thanks to this link for the info:

Allow Number and String for PropTypes – ReactJS

Hi everyone,

A quick post on how to allow a string or number when defining PropTypes:

static propTypes = {
        numberField: PropTypes.number.isRequired,
        stringField: PropTypes.number.isRequired,
        mixedField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired

Thanks to this stackoverflow post for the info: