Not recognized by @ when using react

I connected the npm package mobx-react and throws the following error at startup

Syntax error: C:/..../index.jsx: Unexpected token (4:0)

enter a description of the image here

Author: Lancelot, 2018-09-30

1 answers

. !!! the author of the question does not use TS (.jsx)
-> intended use Babel
-> it is discussed in the text below

Judging by the fact that the decarators you call a dog-I highly recommend:

  1. To get started, check out this article on habr https://habr.com/post/277021/, you can still look here https://learn.javascript.ru/decorators and here https://github.com/tc39/proposal-decorators#decorators.

  2. Then - then, in a good way, you need to feel, play with the decorators, but then the question arises, which plugin to use https://babeljs.io/docs/en/babel-plugin-transform-decorators

    • babel-plugin-transform-decorators
    • babel-plugin-transform-decorators-legacy
    • UPD:
      but, on the site, npm is generally recommended for Babel >= 7.x
      @babel/plugin-proposal-decorators

What the documentation saysmobx

In short:

  1. install babel-plugin-transform-decorators-legacy
  2. Include it in .babelrc like this

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

Https://mobx.js.org/best/decorators.html#enabling-decorator-syntax

Babel: manually enabling decorators

To enable support for decorators without using the mobx preset, follow the following steps. Install support for decorators: npm i --save-dev babel-plugin-transform-decorators-legacy. And enable it in your .babelrc file:

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

Note that the order of plugins is important: transform-decorators-legacy should be listed first. Having issues with the babel setup? Check this issue first.

For babel 7, see issue 1352 for an example setup.


I tried to build a project with these configs

Package.json

"devDependencies": {
  "@babel/core": "^7.1.0",
  "babel-plugin-transform-decorators-legacy": "1.3.5",
}

.babelrc

{
  "plugins": [
    ["transform-decorators-legacy"]
    // или так
    //["transform-decorators-legacy", {"decoratorsBeforeExport": true}]
  ]
}

But I got the error

Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.

And with that, my interest in the question faded.


If my the answer does not suit you - I recommend it:

  1. find an article with a detailed description of the installation and configuration of the project, try it if you can't specify it in the question.
  2. attach the contents of the files package.json and .babelrc to the question, and preferably a link to the minimum project on github.
  3. and finally-stock up on tea, gingerbread and patience:) waiting for the adepts of babel / react/flov
 2
Author: qwabra, 2018-10-01 01:10:44