CODEWITHSUNDEEP
javascriptreactjsbabeljspackage.jsontranspiler
sthig
sthig

Reputation: 469

Babel Decorators transform, constantly get unexpected token (with react project) no matter what I try

I've done a fair amount of searching through StackO trying to find an answer but I keep coming up with the same error, unexpected token

Whenever I use the text decorator transpile to correct the error, I still get the same problem in my component.

My error is this:

./src/components/pages/projectpages/dnd2/Card.js
Syntax error: Unexpected token (71:0)

  69 | };
  70 | 
> 71 | @DropTarget(ItemTypes.CARD, cardTarget, connect => ({
     | ^
  72 |   connectDropTarget: connect.dropTarget(),
  73 | }))
  74 | @DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({

and this is how I have it setup in my package.json (and I've tried Stage 1 with no success either)

{
  "name": "my-app",
  "version": "0.1.0",
  "babel": {
    "plugins": [
      "transform-decorators"
    ]
  },
  "stage": 0,
  "private": true,
  "dependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "date-fns": "^1.28.5",
    "dragula": "^3.7.2",
    "flexbox-react": "^4.3.3",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "react": "^15.6.1",
    "react-css-transition-replace": "^2.2.1",
    "react-dnd": "^2.4.0",
    "react-dnd-html5-backend": "^2.4.1",
    "react-dom": "^15.6.1",
    "react-dragula": "^1.1.17",
    "react-fa": "^4.2.0",
    "react-flexbox-grid": "^1.1.3",
    "react-fontawesome": "^1.6.1",
    "react-image-compare": "0.0.1",
    "react-jsonschema-form": "^0.49.0",
    "react-modal": "^1.9.4",
    "react-moment": "^0.2.4",
    "react-router-dom": "^4.1.1",
    "react-toggle-display": "^2.2.0",
    "react-transition-group": "^1.2.0",
    "simple-react-forms": "^1.3.0",
    "styled-components": "^1.4.6",
    "styled-props": "^0.2.0"
  },
  "devDependencies": {
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

What else am I missing here?

Upvotes: 3

Views: 924

Answers (2)

Héctor Espí Hernández
Héctor Espí Hernández

Reputation: 900

To enable decorators using Babel 6 and ES6 (annotations are a draft specification of ES7), you must do the following:

Firstly, install babel support for decorators using ES6:

npm i -S babel-plugin-transform-decorators-legacy

In case you used an old version of create-react-app for creating your app, you must also install support for decorators to react-scripts compiler:

npm i -S decorators-react-scripts

Then, modify the babelrc file to look like this:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-decorators-legacy"]
}

Upvotes: 0

Deividas
Deividas

Reputation: 6507

In your package.json file

"babel": {
  "plugins": [
    "transform-decorators"
  ]
},

should be replaced with

"babel": {
  "plugins": [
    "transform-decorators-legacy"
  ]
},

Bear in mind that decorators can be written as simple JS functions.

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
 connectDropTarget: connect.dropTarget(),
}))

is the equivalent to 

DropTarget(ItemTypes.CARD, cardTarget, connect => ({
 connectDropTarget: connect.dropTarget(),
}))(YourClassName)

In other word, @ symbol acts as (YourClassName) for whatever class that comes after the decorator.

You can read more about EcmaScript decorators here.

EDIT:

If you want to apply to or more of these you can either nest them like this

DropTarget(...)(DragSource(...)(YourClassName))

or like this

const withDropTarget = DropTarget(...)(YourClassName)
const withDragSource = DragSource(...)(withDropTarget)
export default withDragSource

or use a compose helper, which would allow you to write your code like this

const enhance = compose(
  DropTarget(...),
  DragSource(...)
)

export default enhance(YourClassName)

Upvotes: 2

Related Questions