babel decorator plugin not working - reactjs

Question

I am trying to finstall the babel decorator plugin from their site at https://babeljs.io/docs/plugins/transform-decorators/ . I have followed all instructions as so to stop errors like this happening:
./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) => ({
I put this in my package.json
{
"plugins": ["transform-decorators"]
}
and run NPM Install and I still get the error, I'm not sure what else to do from this point and obviously I'm missing something. I'm posting my package.json here:
{
"name": "my-app",
"version": "0.1.0",
"stage": 0,
"private": true,
"dependencies": {
"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"
},
"plugins": ["transform-decorators"]
}
and the component I'm getting there error is here with the # decorator
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import { DragSource, DropTarget } from 'react-dnd';
import ItemTypes from './ItemTypes';
const style = {
border: '1px dashed gray',
padding: '0.5rem 1rem',
marginBottom: '.5rem',
backgroundColor: 'white',
cursor: 'move',
};
const cardSource = {
beginDrag(props) {
return {
id: props.id,
index: props.index,
};
},
};
const cardTarget = {
hover(props, monitor, component) {
const dragIndex = monitor.getItem().index;
const hoverIndex = props.index;
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return;
}
// Determine rectangle on screen
const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
// Get vertical middle
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
// Determine mouse position
const clientOffset = monitor.getClientOffset();
// Get pixels to the top
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return;
}
// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return;
}
// Time to actually perform the action
props.moveCard(dragIndex, hoverIndex);
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
monitor.getItem().index = hoverIndex;
},
};
#DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}))
#DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
}))
export default class Card extends Component {
static propTypes = {
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired,
index: PropTypes.number.isRequired,
isDragging: PropTypes.bool.isRequired,
id: PropTypes.any.isRequired,
text: PropTypes.string.isRequired,
moveCard: PropTypes.func.isRequired,
};
render() {
const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
const opacity = isDragging ? 0 : 1;
return connectDragSource(connectDropTarget(
<div style={{ ...style, opacity }}>
{text}
</div>,
));
}
}
Can you please help me out figuring why I'm still getting the error here? Thank you!

Answer 1

If you're putting babel config in your package.json, put it inside a babel section, not at the top level.
"babel": {
"plugins": ["transform-decorators"]
}