experimentalDecorators support incomplete

What version of Next.js are you using?

12.0.8-canary.13

What version of Node.js are you using?

v14

What browser are you using?

n/a

What operating system are you using?

macOS

How are you deploying your application?

other

Describe the Bug

After removing the babelrc and setting experimentalDecorators to true in compiler options, the build fails with error…

“Error: error: Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead.”

Granted, maybe should begin refactoring our legacy decorators anyway, but this should work right?

old .bablerc has…

"plugins": [["@babel/plugin-proposal-decorators", {"legacy": true}]]

jsconfig.json has…

{
    "compilerOptions" {
        "experimentalDecorators": true
    }
}

Expected Behavior

Project builds. Currently the build fails with above error.

To Reproduce

function wrapComponent(Component) {
    return (props) => <Component {...props} imDecorated />
}



@wrapComponent
export default class MyComponent extends Component {
    render() { return <div />; }
}

[oyeanuj]

Also seeing this in the latest 12.1.0 version.

[nol13]

@timneutkens Any update on this one? Like with @rmsheppard, this is a pretty big change to make across our projects, stopping us from opting into swc. What’s the best workaround?

We ended up refactoring them all to use redux compose instead. Lot’s of files to change but all pretty straightforward.

// before
@wrapComponent1
@wrapComponent2
export default class MyComponent extends Component {
    render() { return <div />; }
}

// after
export default compose(wrapCompontent1, wrapCompontent2)(MyComponent)