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.

Unexpected token `@` when using decorators

See original GitHub issue

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

v14.18.1

What browser are you using?

Brave

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Error when using decorators in next@12.0.2:

./pages/index.tsx
Error: error: Unexpected token `@`. Expected identifier, string literal, numeric literal or [ for the computed key

   |
10 |   @Decorator()
   |   ^

Caused by:
    0: failed to process js file
    1: Syntax Error

Screenshot 2021-11-05 at 2 46 41 PM

Expected Behavior

Decorators to work.

To Reproduce

Run npm run build in this sandbox

Issue Analytics

State:
Created 2 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

aboqasemcommented, Nov 30, 2021

@virus231 @lbozzo it is fixed in the stable release as well!

2reactions

lbozzocommented, Nov 30, 2021

@virus231 It seems that as of this moment, it is fixed in Canary. yarn add next@canary

Top Results From Across the Web

Decorator feature not working (unexpected token)

Just tried to use decorators in React:

Property decorators throw "Parsing error: Unexpected token"

I'm using Angular2+ES6 which requires both @Class and @Property decorators. With the parser set to 'babel-eslint' the class decorators aren't throwing any ...

[Solved]-Jest: Unexpected token @ Decorator-Reactjs

I think you'll need to add a .babelrc file. It sounds like you're missing the es2016 plugin for babel, which converts ES7 code...

swc with node, typescript & decorators fails at "error - Reddit

swc with node, typescript & decorators fails at "error: Unexpected token Some(At)". Code looks like this: const fs = require('fs-extra'); ...

Enabling decorators · MobX

Decorator syntax and Create React App (v2) ... Decorators are only supported out of the box when using TypeScript in create-react-app@^2.1.1 and newer....