SyntaxError в Webpack/React.js Неожиданный токен = {} в React

В одном из моих файлов .js я получаю следующую ошибку от Webpack:

  4 | export default function(ComposedComponent) {
  5 |   class Authentication extends Component {
> 6 |     static contextTypes = {
    |                         ^
  7 |       router: React.PropTypes.object
  8 |     }
  9 |

Это мои зависимости от разработчиков:

  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^0.26.1",
    "file-loader": "^1.1.4",
    "html-webpack-plugin": "^2.30.1",
    "image-webpack-loader": "^3.4.2",
    "rimraf": "^2.6.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.9",
    "webpack": "2.2.0-rc.0",
    "webpack-dev-server": "^2.2.0-rc.0"
  }

И это моя конфигурация Webpack:

{
  "presets": ["env", "react", "stage-3"],
  "plugins": ["transform-object-rest-spread"]
}

Может ли кто-нибудь сказать, какой плагин или пакет отсутствует? Благодарю вас!


webpack reactjs jsx babeljs webpack-2
person TheGabornator    schedule 02.10.2017    source источник
comment
Посмотрите на это и это. Вам просто нужно добавить правильные пресеты Babel, чтобы иметь возможность использовать статические свойства класса.   -  person Abhishek Ghosh    schedule 03.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

Ничего не пропало, это просто неправильный синтаксис.

Статические методы должны быть (как следует из названия) функциями.

Пытаться:

class Authentication extends Component {
   ...
}

Authentication.contextTypes = {
    router: React.PropTypes.object
}
person Daniel    schedule 02.10.2017
comment
Та же проблема... Теперь он указывает на файл . между Authentication.contextTypes. Интересно, что со старой настройкой все было в порядке, когда я загрузил учебник, он просто не работал с моим новым транспилятором Webpack. - person TheGabornator; 02.10.2017
comment
Далеко, но попробуй babel-preset-es2015 и добавь es2015 в свои пресеты - person Daniel; 02.10.2017
comment
@Дэниел прав. Вам просто нужно добавить правильные пресеты. Посмотрите на мой комментарий для ссылок. - person Abhishek Ghosh; 03.10.2017
comment
Спасибо за ваши усилия, но я просто продолжаю получать сообщения об ошибках. На этот раз Uncaught Error: _registerComponent(...): Целевой контейнер не является элементом DOM, даже несмотря на то, что скрипт находится внизу документа. :( - person TheGabornator; 03.10.2017

arrow_upward
1
arrow_downward

Свойства класса на данный момент находятся на стадии 2, поэтому они не включены в babel-preset-env. Вы также можете:

  • включить только это конкретное преобразование с .babelrc:

    { "плагины": ["свойства-класса-преобразования"] }

  • включить все предложения этапа 2 с:

    { "пресеты": ["env", "реагировать", "этап-2"] }

Перед добавлением всех stage-2 предложений учитывайте риски: https://babeljs.io/docs/plugins/preset-stage-2/

person Aymeric Bouzy aybbyk    schedule 03.10.2017