Wrapping a multi export node module in React Component

Question

I am looking at using the React-Bootstrap-Table module in my project. I want to wrap it in a React component called Table which will simply expose the react-bootstrap-module but also pull in the default stylesheet and a custom stylesheet. The wrapper component will live in a common UI-Kit so encapsulating it in this way will make it easier to use in other projects and prevent inconsistencies with css etc.

In a folder called Table I have the following @richsilv suggestion

index.js

import Table from './Table'

export default Table

Table.js

import * as ReactBootstrapTable from 'react-bootstrap-table'
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'
import './TableStyles.scss'

export default ReactBootstrapTable

I am then trying to import it into another component like so...

import { BootstrapTable, TableHeaderColumn } from '../Table'

This gives me the following error

Invariant Violation: Element type is invalid: expected a string (for
built-in components) or a class/function (for composite components) but 
got: undefined. You likely forgot to export your component from the
file  it's defined in. Check the render method of `ExportCSVTable`.

ExportCSVTable being the component I am trying to import Table into.

Strangely if I do

 import Table from '../Table'

the Table will render without issue. The only problem with that is that it fails linting because Table is defined but never used and any of the bootstrap table components are used but never defined. Plus it's just annoying that I can't destructure Table like I would do normally!

Hopefully it's a simple change to the way I am wrapping the module but any help would be greatly received.

Update

Error thrown after implementing @richsilv suggestion

richsilv · Answer 1 · 2017-03-02T14:59:58.450

0

Apologies for wasting your time, I really should have read the question better. It's Table.js that needs to change:

import * as ReactBootstrapTable from 'react-bootstrap-table'
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'
import './TableStyles.scss'

export default ReactBootstrapTable
export * from 'react-bootstrap-table'

IGNORE BELOW

Try this:

import Table from './Table'~~

export default Table~~
export * from './Table'

edited Mar 02 '17 at 14:59

answered Mar 02 '17 at 09:10

richsilv

7,993
1
23
29

thanks for the answer but that gives me Syntax Error: Unexpected token import – bencrinkle Mar 02 '17 at 09:15
but it runs without error if you delete the last line? – richsilv Mar 02 '17 at 09:58
and import Table in the component without destructuring yes – bencrinkle Mar 02 '17 at 10:56
are you transpiling? - I think it's [valid syntax](https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export) and it transpiles fine for me. – richsilv Mar 02 '17 at 11:37
yes im transpiling, i've attached a screenshot of where the error is being thrown – bencrinkle Mar 02 '17 at 12:54
thanks for your effots richsilv but still not working. I just get the same Unexpected token error – bencrinkle Mar 03 '17 at 09:40

Wrapping a multi export node module in React Component

1 Answers1