Code breaking with webpack 2

[atkawa7]

Code breaking with webpack 2

[tannerlinsley]

Fixed in 505db8d ([email protected])

[tannerlinsley]

Thanks for finding this bug!

[tannerlinsley]

Can you post your props and data?

[atkawa7]

here is the function that creates columns

function getColumns(route) {
const columns = [  'date',
    'total_plays',
    'total_views',
    'total_time',
    'title',
    'plays'];
    var headers = columns.map(function(header) {
        if (header === 'total_time') {
            return {
                header: titleCaps(header),
                accessor: header,
                render: props => (
                    <span>
                        {convertHours(parseInt(props.value))}
                    </span>
                )
            };
        } else if (header === 'title') {
            return {header: '#1 Title ', accessor: header}
        } else if (header === 'plays') {
            return {header: '#1 Plays ', accessor: header}
        } else if (header === 'date') {
            return {
                header: titleCaps(header),
                accessor: header,
                render: props => (
                    <span>
                        <Link to={`${route.path}/${props.value}`}>{props.value}</Link>
                    </span>
                )
            };
        } else if (header === 'title') {

            return {
                header: titleCaps(header),
                accessor: header,
                render: props => <span className='number'>{props.value.split(/\s+/).slice(0, 10).join(' ')}</span>,
                sortable: false
            }
        } else {

            return {header: titleCaps(header), accessor: header};
        }

    });
    return headers;
    console.log(headers);
}

[tannerlinsley]

Looks good to me. What about where you render your table? Maybe set a break point at the line and log some of the variables?

[atkawa7]

Here is the chart without the table but once I add table it does not work

[atkawa7]

var currentColumns = getColumns(route);
return (<ReactTable columns={currentColumns} manual data={this.state.results} pages={this.state.pageNumber} loading={this.state.loading} onChange={this.handlePage.bind(this)} minRows={0} pageSizeOptions={[
                    5,
                    10,
                    20,
                    25,
                    50,
                    100,
                    150,
                    200,
                    250,
                    500
               ]}/>);

[atkawa7]

In the default constructor

this.state ={
  results: [],
    pageNumber: 1,
    page: 1,
    count: 0,
    next: null,
    previous: null,
    pageSize: 20,
    loading: true,
    ordering: '-date'};

[tannerlinsley]

Set a breakpoint at the error and copy the current internal state and props of the table. Post them here if you can?

[atkawa7]

Found the error. It is because of this import function. It is not transforming the code. What could be a reason for this

[tannerlinsley]

Well that's weird. Very standard import, no?

[dmftuva]

export default class SettingsOrgs extends React.Component {

drawTable() {
    var columns = [
        {
            header: 'ID',
            accessor: 'id'
        },
        {
            header: 'Full Name',
            accessor: 'fullname'
        },
        {
            header: 'Inn',
            accessor: 'inn'
        },
    ];

    return (
        <div>
            <ReactTable
                data={this.state.items}
                columns={columns}
            />
        </div>
    )
}

render() {
    return (
           <div className='row expanded'>
                <div className="small-12">
                    {this.drawTable()}
                </div>
            </div>

)
}
}

Uncaught (in promise) TypeError: Cannot read property 'columns' of undefined

[dmftuva]

import React,{Component} from 'react'
import ReactTable from 'react-table'

[vladra]

I've just encountered same error, with webpack 1. So it's not only webpack 2 related

Passing columns property to each column solving error, but it's not working like in docs then

[atkawa7]

How ? @vladra Please give an example?

[tannerlinsley]

The storybook is working fine with examples similar to yours. Does the Server-side demo work for you?

[tannerlinsley]

Wait. I think I see the problem. I'll have the fix out in 5 minutes.