當使用babel裝飾器時出現意外令牌

我目前正在構建一個反應項目，並已開始使用連接使用redux。我使用裝飾引用這即當使用babel裝飾器時出現意外令牌

const mapStateToProps = (state) => { 
    return { 
     active: state.sortOrder 
    } 
}; 

@connect(mapStateToProps) 
export default class SortFilter extends Component { 
    //component code here 
}

SyntaxError: /Sort.js: Unexpected token (10:0) @connect(mapStateToProps)

這是我已經包括巴別變換-裝飾和0級預設（因爲這似乎是他人的溶液）我的WebPack配置。

const PATH = require('path'); 

const webpack = require("webpack"); 

const ROOT = '../../../'; 

const APP_FOLDER = PATH.resolve(__dirname, ROOT, 'app/'); 
const APP_ENTRY_FILE = PATH.resolve(__dirname, ROOT, APP_FOLDER, 'client.js'); 

const BUILD_FOLDER = PATH.resolve(__dirname, ROOT, 'app/public/js/'); 
const PUBLIC_PATH = '/js/'; 

const BUILD_FILE = 'app.js'; 

const ESLINT_CONFIG_FILE = PATH.resolve(__dirname, ROOT, 'tools/build/config/eslint-config.json'); 

var webpackConfig = { 
entry: { 
    app: APP_ENTRY_FILE 
}, 
output: { 
    path: BUILD_FOLDER, 
    publicPath: PUBLIC_PATH, 
    filename: BUILD_FILE 
}, 
devtool: 'inline-source-map', 
debug: true,  
bail: true, 
eslint: { 
    configFile: ESLINT_CONFIG_FILE 
}, 
module: { 
    preLoaders: [ 
     { 
      test: /\.js$/, 
      include: [ 
       APP_FOLDER 
      ], 
      loader: 'eslint-loader' 
     } 
    ], 
    loaders: [ 
     { 
      test: /\.js$/, 
      include: [ 
       APP_FOLDER 
      ], 
      loader: 'babel', 
      query: { 
       compact: false, 
       cacheDirectory: true, 
       presets: ['es2015', 'react', 'stage-0'], 
       plugins: ['transform-decorators-legacy'] 
      } 
     } 
    ]   
}, 
externals: { 
    'axios': 'axios', 
    'react': 'React', 
    'react-router': 'ReactRouter', 
    'history': 'History', 
    'react-dom': 'ReactDOM' 
}, 
plugins: [ 
    new webpack.NoErrorsPlugin() 
] 
}; 

module.exports = webpackConfig;

任何幫助解決此問題將不勝感激。

來源

2017-04-19 Phil

您是否嘗試將babel配置移動到項目根目錄下的.babelrc文件中（刪除webpack上的babel配置）？

這是文件的樣子：

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

來源

2017-04-19 10:20:22 maxgallo

我已經試過這一點，然後得到另一個錯誤。 TypeError：無法讀取undefi的屬性'錯誤' ned at OptionManager.mergeOptions（/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:28） – Phil

你使用的是什麼版本的'babel-core'？ – loganfsmyth

你使用'babel'版本> = 6嗎？ – maxgallo

您需要安裝babel-plugin-transform-decorators：

npm install babel-plugin-transform-decorators-legacy --save-dev

然後加入.babelrc：

"plugins": ["transform-decorators-legacy"]

來源

2017-07-04 15:57:36

當使用babel裝飾器時出現意外令牌

回答

相關問題