@nivo/sankey - React Hooks / React Router

[awatson1978]

Describe/explain the bug
Hello. Receiving the following error regarding React Hooks.
Invariant Violation: Hooks can only be called inside the body of a function component.

To Reproduce
Just using the provided example from the documentation. Using it within a Meteor.js build pipeline for Node/Javascript, and with React 16.8.4.

const MyResponsiveSankey = ({data}) => (
  <ResponsiveSankey
    data={data}
    margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
    align="justify"
    colors={{ scheme: 'category10' }}
    nodeOpacity={1}
    nodeThickness={18}
    nodeInnerPadding={3}
    nodeSpacing={24}
    nodeBorderWidth={0}
    nodeBorderColor={{ from: 'color', modifiers: [ [ 'darker', 0.8 ] ] }}
    linkOpacity={0.5}
    linkHoverOthersOpacity={0.1}
    enableLinkGradient={true}
    labelPosition="outside"
    labelOrientation="vertical"
    labelPadding={16}
    labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1 ] ] }}    
  />
)


let sankeyData = {
  "nodes": [
    {
      "id": "John",
      "color": "hsl(102, 70%, 50%)"
    },
    {
      "id": "Raoul",
      "color": "hsl(58, 70%, 50%)"
    }
   ...etc
}
export class WorkflowPage extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div id='indexPage'>
        <FullPageCanvas>
          <GlassCard height='auto' >
            <CardTitle 
              title="Workflow Analysis"
              titleStyle={{fontSize: '240%'}}
              subtitleStyle={{fontSize: '180%'}}
              />
            <CardText style={{fontSize: '180%', height: '400px'}}>
              <MyResponsiveSankey data={sankeyData} style={{fontSize: '180%', height: '400px'}} />                
            </CardText>
          </GlassCard>
        </FullPageCanvas>
      </div>
    );
  }
}

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: Latest

[awatson1978]

Update: More debugging, and this is clearly related to using React Router v4. Apparently React Router is introducing a class based container somewhere along the render tree, which is throwing the Hook error.

Does anybody have a code sample of using Nivo with React Router?

[plouc]

@awatson1978, can you please reproduce this issue on codesandbox? I was able to use nivo in several contexts, and before moving to gatsby, the nivo website was using React router. I'm not sure it's an issue with nivo.

[Branislavjvc]

gaearon/react-hot-loader#1088

Related, figured it might shine some light on the topic if you're using react-hot-loader.

[awatson1978]

Hi. Did a proof-of-concept and everything worked; so the problem was somewhere in my codebase. Easiest thing to do is do a quick rewrite of the app. Thanks for the help.