Geek Answers Handbook

Using static propTypes ES7 with React-Native

When I start my project using the default React-Native package, I have this error: Unexpected token in this line:

 static propTypes = { /// ... };

I looked at the React-Native problems on GitHub, but I did not find a solution.

Any suggestion?

+6
source share
6 answers

After @Fomahaut's answer, I keep looking for the GitHub Facebook repository and found this problem: https://github.com/facebook/react-native/issues/2182

  • Create a .babelrc file in the project root directory
  • Add More Rules to Babel

Example:

  { "retainLines": true, "compact": true, "comments": false, "whitelist": [ "es6.arrowFunctions", "es6.blockScoping", "es6.classes", "es6.constants", "es6.destructuring", "es6.forOf", "es6.modules", "es6.parameters", "es6.properties.computed", "es6.properties.shorthand", "es6.spread", "es6.tailCall", "es6.templateLiterals", "es6.regex.unicode", "es6.regex.sticky", "es7.asyncFunctions", "es7.classProperties", "es7.comprehensions", "es7.decorators", "es7.exponentiationOperator", "es7.exportExtensions", "es7.functionBind", "es7.objectRestSpread", "es7.trailingFunctionCommas", "regenerator", "flow", "react", "react.displayName" ], "sourceMaps": false }
+3
source

The React-Native packager uses Babel to port ES6 and ES7, but NOT ALL. The list of permissions is here . In your case , the props class is not enabled by default in the RN packer. You can use Babel to compile your code in front of the packer, or simply enable it in your packer settings. See this white paper for more information.

+7
source

Try adding your propTypes to your class:

 var MyClass extends React.Component { .... } MyClass.propTypes = { .... /* enter proptypes here */ }
+4
source

According to this answer you need to install a plugin for class properties with Babel 6.

As in Babel 6, now you need the transform-class-properties plugin to support class properties.

Steps:

  • Run this: npm install babel-plugin-transform-class-properties
  • Add this to your .babelrc: "plugins": ["transform-class-properties"] (Note that this is a plugin, not a conversion, so do not put it on the list of "presets".)

Worked for me.

+3
source

Set stage-0 Babel preset ( npm i --save-dev babel-preset-stage-0 ) and add it to the .babelrc file presets section, for example:

 { "presets": ["react", "es2015", "babel-preset-stage-0"] }
+1
source

See if this helps:

  • $ npm install babel-plugin-transform-decorators
  • go to /<your project root>/node_modules/react-native/packager/react-packager/.babelrc

  • Add "transform-decorators" to this list:

    { "retainLines": true, "compact": true, "comments": false, "plugins": [ "syntax-async-functions", "syntax-class-properties", "syntax-trailing-function-commas", "transform-class-properties", "transform-es2015-arrow-functions", "transform-es2015-block-scoping", "transform-es2015-classes", "transform-es2015-computed-properties", "transform-es2015-constants", "transform-es2015-destructuring", ["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}], "transform-es2015-parameters", "transform-es2015-shorthand-properties", "transform-es2015-spread", "transform-es2015-template-literals", "transform-flow-strip-types", "transform-object-assign", "transform-object-rest-spread", "transform-react-display-name", "transform-react-jsx", "transform-regenerator", "transform-es2015-for-of", -->"**transform-decorators**"<-- ], "sourceMaps": false }

0
source

More articles:


All Articles