javascript - Unexpected Token @ when using babel decorator - Stack Overflow

admin管理员组

文章数量:1023876

I am currently building a react project and have started incorporating redux using connect. I am using decorators to reference this i.e.

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

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

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

THis is my webpack config which I have included the babel-transform-decorators and stage-0 preset (as this seemed to be a solution for others).

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: {
                pact: 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;

Any help in solving this would be much appreciated.

I am currently building a react project and have started incorporating redux using connect. I am using decorators to reference this i.e.

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

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

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

THis is my webpack config which I have included the babel-transform-decorators and stage-0 preset (as this seemed to be a solution for others).

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: {
                pact: 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;

Any help in solving this would be much appreciated.

• javascript
• node.js
• webpack
• redux
• babeljs

Share Improve this question Follow asked Apr 19, 2017 at 9:46 PhilPhil 1,66244 gold badges2626 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to install babel-plugin-transform-decorators:

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

then add in .babelrc:

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

Have you tried to move babel configuration in a .babelrc file in the root of the project (removing the babel configuration on webpack) ?

This is how the file looks like:

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

I am currently building a react project and have started incorporating redux using connect. I am using decorators to reference this i.e.

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

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

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

THis is my webpack config which I have included the babel-transform-decorators and stage-0 preset (as this seemed to be a solution for others).

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: {
                pact: 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;

Any help in solving this would be much appreciated.

I am currently building a react project and have started incorporating redux using connect. I am using decorators to reference this i.e.

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

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

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

THis is my webpack config which I have included the babel-transform-decorators and stage-0 preset (as this seemed to be a solution for others).

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: {
                pact: 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;

Any help in solving this would be much appreciated.

• javascript
• node.js
• webpack
• redux
• babeljs

Share Improve this question Follow asked Apr 19, 2017 at 9:46 PhilPhil 1,66244 gold badges2626 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to install babel-plugin-transform-decorators:

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

then add in .babelrc:

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

Have you tried to move babel configuration in a .babelrc file in the root of the project (removing the babel configuration on webpack) ?

This is how the file looks like:

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

本文标签： javascriptUnexpected Tokenwhen using babel decoratorStack Overflow