react-rails: Uncaught ReferenceError: exports is not defined

Question

I'm using the react-rails gem.

Ive written a component SortableTable that I am trying to extend:

In components/common/sortable_table.jsx

class SortableTable extends React.Component
{
..
}

It works fine in components/staff_dashboard/staff_dashboard_table.jsx

class StaffDashboardTable extends SortableTable {
...
}

but in components/accounting_team_dashboard/accounting_team_dashboard_table.jsx

class AccountingTeamTable extends SortableTable {
...
}

I get the error SortableTable is not defined.

I read something about exporting the components so I added it:

class SortableTable extends React.Component
{
..
}
export default SortableTable

But this now gives an error: Uncaught ReferenceError: exports is not defined.

This on gem version 2.2.1, I'm not using web packer. It's really odd to me that it works for the staff table - Maybe because it gets included below SortableTable?

Answer 1

If extending the SortableTable component works in components/staff_dashboard/staff_dashboard_table.jsx

it will work in

components/accounting_team_dashboard/accounting_team_dashboard_table.jsx also

Now the problem could be that you are importing it from the wrong path.

You should import it like

In components/staff_dashboard/staff_dashboard_table.jsx

import SortableTable from '../common/sortable_table'
class StaffDashboardTable extends SortableTable {
...
}

and In components/accounting_team_dashboard/accounting_team_dashboard_table.jsx

import SortableTable from '../common/sortable_table'
class AccountingTeamTable extends SortableTable {
...
}