次のエラーが表示されます。Babylon/ Babel 6から移行する場合、または古いデコレーターの提案を使用する場合は、「デコレーター」ではなく「デコレーター-レガシー」プラグインを使用する必要があります。
package.json
"@babel/plugin-proposal-decorators": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz",
"integrity": "sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q==",
"requires": {
"@babel/helper-plugin-utils": "^7.0.0",
"@babel/helper-replace-supers": "^7.1.0",
"@babel/helper-split-export-declaration": "^7.0.0",
"@babel/plugin-syntax-decorators": "^7.1.0"
}
},
"@babel/plugin-syntax-decorators": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz",
"integrity": "sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ==",
"requires": {
"@babel/helper-plugin-utils": "^7.0.0"
}
},
"babel-plugin-syntax-decorators": {
"version": "6.13.0",
"resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
"integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
"dev": true
},
"babel-plugin-transform-decorators-legacy": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.5.tgz",
"integrity": "sha512-jYHwjzRXRelYQ1uGm353zNzf3QmtdCfvJbuYTZ4gKveK7M9H1fs3a5AKdY1JUDl0z97E30ukORW1dzhWvsabtA==",
"dev": true,
"requires": {
"babel-plugin-syntax-decorators": "^6.1.18",
"babel-runtime": "^6.2.0",
"babel-template": "^6.3.0"
}
},
"requires": {
"@babel/plugin-proposal-decorators": "7.1.2",
}
tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}
エラーメッセージは少しわかりにくいですが、少し深く検索すると、次の方法で解決できます。
このガイドでwebpackを使用していることを除いて、私は想定していません。
開発依存関係にバベル提案デコレーターを追加する必要があります(開発時にのみ必要です)(既に追加済みです)。
糸を使用している場合
yarn add --dev @babel/plugin-proposal-decorators
npmのotheriwse
npm install --save-dev @babel/plugin-proposal-decorators
次に、package.jsonファイルでbabel configセクションを見つけるか、そこにない場合は1つ追加します。設定名は厳密に「babel」です。
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
手で入力する場合は、インデントに特に注意してください。オブジェクトに注意してください"@babel/plugin-proposal-decorators"
は2つの配列内に深くネストされているため、機能するためにはそのようにする必要があります。
そして、健全性チェックのために、あなたのdevDependenciesは少なくとも次のようになります
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.1.2"
}
これで、yarnまたはnpmのいずれかを使用してアプリケーションを構築し、その後も幸せに暮らせるようになります。
React Native 0.59
babel.config.js:
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
["@babel/plugin-transform-flow-strip-types"],
["@babel/plugin-proposal-decorators", { "legacy": true}],
["@babel/plugin-proposal-class-properties", { "loose": true}]
]
}
npm install @babel/plugin-transform-flow-strip-types @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save
出典: https://github.com/facebook/react-native/issues/20588#issuecomment-448218111
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.3.0"
}
{
"presets": ['@babel/preset-env', '@babel/preset-react'],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "less" }],
[
"@babel/plugin-proposal-decorators",
{
"decoratorsBeforeExport":true
}
]
]
}