Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

This experimental syntax requires enabling the parser plugin: 'classProperties'

See original GitHub issue

Bug Report

Describe the bug

Look the title, this is an error when i use class component in <Playground>

.babelrc code

{
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

.mdx code

<Playground>
{() => {
    const columns = [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: 200,
    }, {
        title: 'Age',
        dataIndex: 'age',
        width: 100,
        key: 'age',
    }, {
        title: 'Sex',
        dataIndex: 'sex',
        width: 100,
        render: (text) => text === 'M' ? 'male' : 'female'
    }, {
        title: 'Birth',
        dataIndex: 'birth',
        width: 150,
    }, {
        title: 'Address',
        dataIndex: 'address',
        width: 200,
        key: 'address',
    }];

    const result = [];
    for (let i = 1; i <= 100; i++) {
        result.push({
            key: i,
            name: 'John Brown',
            age: 20+i,
            sex: i%2 === 0 ? 'M' : 'F',
            birth: `${1980+i}-01-01`,
            address: 'New York No. 1 Lake Park', 
        })  
    }

    class Demo extends React.Component {
        state = {
            data: [],
            pagination: {},
            loading: false,
        };

        componentDidMount() {
            this.fetch();
        }

        handleTableChange = (pagination) => {
            const pager = { ...this.state.pagination };
            pager.current = pagination.current;
            this.setState({
                pagination: pager,
            });
            this.fetch({
                pageSize: pagination.pageSize,
                pageIndex: pagination.current,
            });
        }

        fetch = ({ pageSize = 10, pageIndex = 1 } = {}) => {
            this.setState({ loading: true });
            new Promise(resolve => {
                setTimeout(() => {
                    resolve(result.slice((pageIndex-1)*pageSize, pageIndex*pageSize));
                }, 2000)
            }).then((data) => {
                const pagination = { ...this.state.pagination };
                pagination.total = 100;
                this.setState({
                    loading: false,
                    data,
                    pagination,
                });
            });
        }

        render() {
            return (
                <Table
                    columns={columns}
                    dataSource={this.state.data}
                    pagination={this.state.pagination}
                    loading={this.state.loading}
                    onChange={this.handleTableChange}
                />
            );
        }
    }
    return <Demo />
}}
</Playground>

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:7

Top GitHub Comments

1reaction

gitaoliaocommented, Feb 16, 2020

Bug Report

Describe the bug

Look the title, this is an error when i use class component in <Playground>

.babelrc code

{
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

.mdx code

<Playground>
{() => {
    const columns = [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: 200,
    }, {
        title: 'Age',
        dataIndex: 'age',
        width: 100,
        key: 'age',
    }, {
        title: 'Sex',
        dataIndex: 'sex',
        width: 100,
        render: (text) => text === 'M' ? 'male' : 'female'
    }, {
        title: 'Birth',
        dataIndex: 'birth',
        width: 150,
    }, {
        title: 'Address',
        dataIndex: 'address',
        width: 200,
        key: 'address',
    }];

    const result = [];
    for (let i = 1; i <= 100; i++) {
        result.push({
            key: i,
            name: 'John Brown',
            age: 20+i,
            sex: i%2 === 0 ? 'M' : 'F',
            birth: `${1980+i}-01-01`,
            address: 'New York No. 1 Lake Park', 
        })  
    }

    class Demo extends React.Component {
        state = {
            data: [],
            pagination: {},
            loading: false,
        };

        componentDidMount() {
            this.fetch();
        }

        handleTableChange = (pagination) => {
            const pager = { ...this.state.pagination };
            pager.current = pagination.current;
            this.setState({
                pagination: pager,
            });
            this.fetch({
                pageSize: pagination.pageSize,
                pageIndex: pagination.current,
            });
        }

        fetch = ({ pageSize = 10, pageIndex = 1 } = {}) => {
            this.setState({ loading: true });
            new Promise(resolve => {
                setTimeout(() => {
                    resolve(result.slice((pageIndex-1)*pageSize, pageIndex*pageSize));
                }, 2000)
            }).then((data) => {
                const pagination = { ...this.state.pagination };
                pagination.total = 100;
                this.setState({
                    loading: false,
                    data,
                    pagination,
                });
            });
        }

        render() {
            return (
                <Table
                    columns={columns}
                    dataSource={this.state.data}
                    pagination={this.state.pagination}
                    loading={this.state.loading}
                    onChange={this.handleTableChange}
                />
            );
        }
    }
    return <Demo />
}}
</Playground>

I have the same problem, I have resolved this by changing the arrow funciton to the traditonal funciton.

1reaction

yeatszhangcommented, Apr 17, 2019

I have the same problem~

Top Results From Across the Web

This experimental syntax requires enabling the parser ...

I have this issue as well, I do have '@babel/plugin-proposal-class-properties' in my babel.config.js and works elsewhere just fine. 2

This experimental syntax requires enabling one of the ...

If you are talking about Parcel.js, you need to install and configure some Babel plugins, to enable Class Private Properties and Methods:.

babel/plugin-syntax-class-properties

Syntax only. It's unlikely you want to use this plugin directly as it only enables Babel to parse this syntax. Instead, use plugin-proposal-class-properties...

this experimental syntax requires enabling one of the ...

"Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "flow", "typescript"." This is the code from that component. < ......

Enabling parser plugin: 'classProperties' [still not fixed] #652

Can't find a solution to enable classProperties SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (5:12).