Peter Gerhat Peter Gerhat - 1 month ago 5
React JSX Question

Unexpected token PropTypes

I am using

"react": "^15.3.2"
and I would expect that support for PropTypes comes out of the Box.

However, each of the following statements ends with an error, I'm looking into solving this problem.

import React, { Component, PropTypes } from 'react';

...

static defaultProps = {
evalScripts: 'never',
callback: () => {}
}

static propTypes = {
path: PropTypes.string.isRequired,
className: PropTypes.string,
evalScripts: PropTypes.oneOf(['always', 'once', 'never']),
fallbackPath: PropTypes.string,
callback: PropTypes.func
}


The error:

Error thrown for request: /js/application.js
SyntaxError: /home/user/react-project/client/scripts/reactsvg.js: Unexpected token (6:22)
export default class ReactSVG extends Component {

static defaultProps = {
evalScripts: 'never',
callback: () => {}
}
at Parser.pp.raise (/home/user/react-project/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/home/user/react-project/node_modules/babylon/lib/parser/util.js:82:8)
at Parser.pp.parseClassProperty (/home/user/react-project/node_modules/babylon/lib/parser/statement.js:624:61)
at Parser.parseClassProperty (/home/user/react-project/node_modules/babylon/lib/plugins/flow.js:836:20)
at Parser.pp.parseClass (/home/user/react-project/node_modules/babylon/lib/parser/statement.js:567:32)
at Parser.pp.parseExprAtom (/home/user/react-project/node_modules/babylon/lib/parser/expression.js:405:19)
at Parser.parseExprAtom (/home/user/react-project/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
at Parser.pp.parseExprSubscripts (/home/user/react-project/node_modules/babylon/lib/parser/expression.js:236:19)
at Parser.pp.parseMaybeUnary (/home/user/react-project/node_modules/babylon/lib/parser/expression.js:217:19)
at Parser.pp.parseExprOps (/home/user/react-project/node_modules/babylon/lib/parser/expression.js:163:19)
at Parser.pp.parseMaybeConditional (/home/user/react-project/node_modules/babylon/lib/parser/expression.js:145:19)
at Parser.pp.parseMaybeAssign (/home/user/react-project/node_modules/babylon/lib/parser/expression.js:112:19)
at Parser.pp.parseExport (/home/user/react-project/node_modules/babylon/lib/parser/statement.js:682:21)
at Parser.parseExport (/home/user/react-project/node_modules/babylon/lib/plugins/flow.js:713:20)
at Parser.pp.parseStatement (/home/user/react-project/node_modules/babylon/lib/parser/statement.js:115:90)
at Parser.parseStatement (/home/user/react-project/node_modules/babylon/lib/plugins/flow.js:655:22)
at Parser.pp.parseTopLevel (/home/user/react-project/node_modules/babylon/lib/parser/statement.js:30:21)
at Parser.parse (/home/user/react-project/node_modules/babylon/lib/parser/index.js:70:17)
at Object.parse (/home/user/react-project/node_modules/babylon/lib/index.js:45:50)
at Object.exports.default (/home/user/react-project/node_modules/babel-core/lib/helpers/parse.js:36:18)
at File.parse (/home/user/react-project/node_modules/babel-core/lib/transformation/file/index.js:574:40)
at File.parseCode (/home/user/react-project/node_modules/babel-core/lib/transformation/file/index.js:691:20)
GET /js/application.js 500 2296.944 ms

Answer

You are getting a syntax error. I don't really know why. but here's my bet.

static defaultProps = { ... };

is causing this error because this is an ES7 feature. maybe you can fix this by using the babel-preset-es2017 preset. or just use

ReactSVG.defaultProps = { ... };

which is semantically the same.