Babel Decorator Plugin funktioniert nicht

Question

Ich versuche, das Babel Decorator Plugin von ihrer Website bei https://babeljs.io/docs/plugins/transform-decorators/ finstall. Ich habe alle Anweisungen befolgt, wie so Fehler wie dies zu verhindern:

./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) => ({ 

ich diese

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

in meinem package.json setzen und laufen NPM installieren und ich immer noch den Fehler, ich bin Ich bin mir nicht sicher, was ich von diesem Punkt aus tun soll und natürlich vermisse ich etwas. Ich poste meine package.json hier:

{ 
    "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"] 
} 

und die Komponente ich dort Fehler immer ist hier mit dem @ Dekorateur

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>, 
    )); 
    } 
} 

Können Sie mir bitte helfen, herauszufinden, warum ich bin bekommst du den Fehler noch? Vielen Dank!

Answer 1

Wenn Sie babel config in Ihr package.json setzen, legen Sie es in einen babel Abschnitt, nicht auf der obersten Ebene.

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