CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Sri Reddy
Sri Reddy

Reputation: 7012

JavaScript: Removing decorators from create-react-app

Firstly, I want to say that I am very new to react world. I am using a react component from github in our project. I noticed that the component uses decorators in their code. And, to use that code as it is, I think we have to eject and use babel. But, we don't want to do that, so I plan to remove decorators (multiple) with the native code.

import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'

@barMixin
@stackMixin
@coordinateGridMixin
export default class BarChart extends BaseChart{
  static displayName = 'BarChart'

  componentDidMount(){
    this.chart = dc.barChart(this.chart)
    this.configure()
    this.chart.render()
  }
}

I started this with the following code, with the help of this page.

import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'
import compose from 'recompose'

class BarChart extends BaseChart {
  static displayName = 'BarChart'

  componentDidMount(){
    this.chart = dc.barChart(this.chart)
    this.configure()
    this.chart.render()
  }
}

export default compose(
  coordinateGridMixin,
  stackMixin,
  barMixin
)(BarChart);

Doing this I get an error "export 'default' (imported as 'compose') was not found in 'recompose'

That make me wonder, do I need to use recompose? Or, there is a different and simpler way? Not sure how to replace this piece.

export default ???(
  coordinateGridMixin,
  stackMixin,
  barMixin
)(BarChart);

Any help would be appreciated. I am not sure if I have given enough information to you to help.

Upvotes: 0

Views: 286

Answers (1)

Dyo
Dyo

Reputation: 4464

Your error is about recompose exporting nothing by default, so your import is incorrect, you should import compose like this :

import { compose } from 'recompose';

You can also chain decorate your component to do it without recompose (not 100% sure about the syntax) :

let decoratedBarChart = coordinateGridMixin(BarChart);
decoratedBarChart = stackMixin(decoratedBarChart);
decoratedBarChart = barMixin(decoratedBarChart);
export default decoratedBarChart;

Upvotes: 2

Related Questions