Can't render react-table

Coding Help
1

My project is here: https://glitch.com/edit/#!/efficient-clef?path=app/index.jsx:103:8

The error is:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    in App

I’m trying to pull in this example: https://glitch.com/edit/#!/giant-need?path=app/app.jsx:32:94

The difference I see in generated javascript is
Mine:

ReactDOM.render(React.createElement(ReactTable, {
          data: data, 
          columns: columns}
        ), document.getElementById("root"));

Example:

ReactDOM.render(React.createElement(ReactTable.defaults, {
          data: data, 
          columns: columns}
        ), document.getElementById("root"));
2

Hey @lapolonio I think the issue is in how you’re requiring the React components differently than the sample you’re working from. The example is using ES6 imports but you’re using ES5 requires. The result is that in the sample what ReactTable represents is a different context than what it represents in your code.

Looking at the npm package docs, there’s an ES5 example that shows adding the default property to the require, so this line would look like this:

const ReactTable = require('react-table').default;

I can’t say that’s the only change that will be required, but that at least gets me something roughly approximating a “table” in a remix of your project.

3

Thanks! I see what you mean by “table”.

I original example I was trying to port was https://codesandbox.io/s/kk4k1z0103
There is a line that I can’t get to work.
import "react-table/react-table.css";
https://glitch.com/edit/#!/efficient-clef?path=app/index.jsx:8:0

Should I create another topic?

4

The project you mentioned as a source handles the react-table styles in a clever way - they used Express routing to render the node module’s included stylesheet:

app.get("/style.css", function(request, response) {
  response.sendFile(path.join(__dirname, '/node_modules/react-table/react-table.css'));
});

That assume a css link like <link rel="stylesheet" href="/style.css">, but you could change that as you needed if you have other styles in style.css you want to keep.

I’m sure there might be more “webpack-y” ways to do that though - I’m not a webpack expert.

1 Like
5

Success!

https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif(image larger than 4096KB)

6

That’s me there in the back.