TypeError: rough.canvas is not a function

[johansedgeware]

Hi,

I'm trying to use your library in a React environment. Can't push it up for reproduction but will try and do my best to explain what it is I am trying to do.

I got this component:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Chart from 'chart.js'
import ChartRough from 'chartjs-plugin-rough'
import { LocaleContext } from '../../contexts/LocaleContext'

class LineBarChart extends Component {
  static contextType = LocaleContext

  static propTypes = {
    data: PropTypes.shape().isRequired
  }

  componentDidMount() {
    this.make()
  }

  componentDidUpdate(prevProps) {
    const { data } = this.props
    if (prevProps.data !== data) {
      this.make()
    }
  }

  make = () => {
    const { data } = this.props
    const ctx = this.lineChartRef.getContext('2d')
    this.chart = Chart.Line(ctx, {
      data,
      plugins: [ChartRough],
      options: {
        responsive: true,
        hoverMode: 'index',
        stacked: false,
        scales: {
          yAxes: [{
            type: 'linear',
            display: true,
            position: 'left',
            id: 'y-axis-1',

            gridLines: {
              drawOnChartArea: false,
              color: '#f2f2f2',
              zeroLineColor: '#f2f2f2'
            }
          }, {
            type: 'linear',
            display: true,
            position: 'right',
            id: 'y-axis-2',

            gridLines: {
              drawOnChartArea: false,
              color: '#f2f2f2',
              zeroLineColor: '#f2f2f2'
            }
          }]
        }
      }
    })
  }

  render() {
    return (
      <canvas ref={(ref) => { this.lineChartRef = ref }} width="100%" height="50" />
    )
  }
}

export default LineBarChart

the data prop could look like this:

{
    labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
    datasets: [{
      label: 'CDN A',
      borderColor: '#2b70f7',
      backgroundColor: '#2b70f7',
      fill: false,
      data: [
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100)
      ],
      rough: {
        roughness: 2,
        bowing: 2
      },
      yAxisID: 'y-axis-2'
    }, {
      label: 'CDN B',
      borderColor: '#ce0060',
      backgroundColor: '#ce0060',
      fill: false,
      data: [
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100)
      ],
      rough: {
        roughness: 2,
        bowing: 2
      },
      yAxisID: 'y-axis-1'
    }, {
      label: 'CDN C',
      borderColor: '#e49e29',
      backgroundColor: '#e49e29',
      fill: false,
      data: [
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100),
        this.randomNumbers(1, 100)
      ],
      rough: {
        roughness: 2,
        bowing: 2
      },
      yAxisID: 'y-axis-2'
    }]
  }

I've also installed all the dependencies (as far as I understood that I had to)

"chart.js": "^2.8.0",
"chartjs-plugin-rough": "^0.2.0",
"roughjs": "^3.1.0",

This is the error I'm getting

chartjs-plugin-rough.js:966 Uncaught TypeError: rough.canvas is not a function
    at ChartElement.draw (chartjs-plugin-rough.js:966)
    at Chart.<anonymous> (Chart.js:8905)
    at Object.each (Chart.js:1801)
    at Chart.draw (Chart.js:8904)
    at Chart.render (Chart.js:8866)
    at Object.callback (Chart.js:1778)
    at Object.advance (Chart.js:2952)
    at Object.startDigest (Chart.js:2925)
    at Chart.js:2914

[connecteev]

Seeing a similar error when I try to use it with Vue. See #5

[transitive-bullshit]

See my answer to #5 for a workaround.

@nagix you should really add an import 'roughjs' to the main and module outputs of this lib (totally fine for the standalone umd build to not reference roughjs at all).

[OrenMe]

issue is due to webpack trying to require the esm build of roughjs. To override it @nagix you will need to force specific commonJS build. You can do so by setting an alias or importing the canvas option directly when bundling(as it is your only used roughjs method anyway)

  resolve: {
    alias: {
      'roughjs': path.resolve('./node_modules/roughjs/bundled/rough.cjs'),
    }
  }

[OrenMe]

see https://github.com/rough-stuff/rough/issues/130

[joerowe]

@johansedgeware I have the exact same issue - did you solve this? The solution linked on #5 didn't work for me :(

[Jasurb3k-coding]

The same problem with NextJs. Is there any way to solve it?