爲什麼在傳入對象引用時，react-intl的defineMessages會引發錯誤？

Question

我試圖讓我的頭在react-intl從雅虎！ i18n項目，我遇到了一個奇怪的問題。我的目標是將基本字符串（英文）存儲在組件外的某種JSON文件中，以便它們可以由非開發人員編輯。

這似乎是邏輯比我只能import他們，然後使用組件中需要的部分，但defineMessages函數會導致錯誤，當我這樣做。

編輯：這個問題似乎圍繞着babel-plugin-react-intl插件和「導出」默認字符串。該應用程序運行良好，但運行npm run build命令時發生錯誤。

.babelrc：

{ 
    "presets": [ 
     "es2015", 
     "react" 
    ], 
    "plugins": [ 
     ["react-intl", { 
      "messagesDir": "./build/messages/" 
     }] 
    ] 
} 

的WebPack-配置：

module.exports = { 
    entry: './src/app.js', // The startingpoint of the app 
    output: { 
    filename: 'bundle.js', // Name of the "compiled" JavaScript. 
    path: './dist',   // Which dir to put it on disk. 
    publicPath: '/',  // Which relative path to fetch code from on the client. 
    }, 
    module: { 
    loaders:[ 
     { 
     test: /\.jsx?$/,   // Convert ES2015/React-code into ES5. 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, 
     { 
     test: /\.json$/,   // Load JSON-files into code base. 
     exclude: /node_modules/, 
     loader: 'json', 
     }, 
    ] 
    }, 
}; 

的package.json：

{ 
    "name": "intl3", 
    "version": "1.0.0", 
    "description": "", 
    "main": "webpack.config.js", 
    "dependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-react-intl": "^2.2.0", 
    "babel-preset-es2015": "^6.14.0", 
    "babel-preset-react": "^6.11.1", 
    "eslint": "^3.3.1", 
    "eslint-loader": "^1.5.0", 
    "eslint-plugin-babel": "^3.3.0", 
    "eslint-plugin-react": "^6.1.2", 
    "json-loader": "^0.5.4", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2", 
    "react-intl": "^2.1.5", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.16.1" 
    }, 
    "devDependencies": { 
    "babel-plugin-react-intl": "^2.2.0", 
    "babel-preset-react": "^6.16.0", 
    "json-loader": "^0.5.4" 
    }, 
    "scripts": { 
    "start:dev": "webpack-dev-server --content-base ./ --config webpack.config.js", 
    "prebuild": "cp index.html ./dist/index.html", 
    "build": "webpack --config webpack.config.js", 
    "start": "http-server dist" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC" 
} 

代碼工作：

import React from 'react'; 
import { FormattedMessage, defineMessages } from 'react-intl'; 

const strings = defineMessages({ 
    "title": { 
     "id": "TITLE", 
     "description": "Title of the app.", 
     "defaultMessage": "Intl Company, Inc." 
    }, 
    "menu": { 
     "id": "MENU", 
     "description": "Word for 'menu'.", 
     "defaultMessage": "Menu" 
    } 
}); 

const Header = (props) => { 
    return (
     <header> 
      <div> 
       <FormattedMessage {...strings.title} values={ { name: 'World' } } /> 
      </div> 
     </header> 
    ); 
}; 

export default Header; 

失敗

代碼：

const headerStrings = { 
    "title": { 
     "id": "TITLE", 
     "description": "Title of the app.", 
     "defaultMessage": "Intl Company, Inc." 
    }, 
    "menu": { 
     "id": "MENU", 
     "description": "Word for 'menu'.", 
     "defaultMessage": "Menu" 
    } 
}; 

const strings = defineMessages(headerStrings); 

錯誤消息我得到試圖通過直接的參考，而不是對象時：如果您正在使用babel-plugin-react-intl用的WebPack一起

./src/components/Header.js 
Module build failed: SyntaxError: [React Intl] `defineMessages()` must be called with an object expression with values that are React Intl Message Descriptors, also defined as object expressions. 

    17 | }; 
    18 | 
> 19 | const strings = defineMessages(headerStrings); 
    |    ^
    20 | 
    21 | const Header = (props) => { 
    22 |  return (

BabelLoaderError: SyntaxError: [React Intl] `defineMessages()` must be called with an object expression with values that are React Intl Message Descriptors, also defined as object expressions. 

    17 | }; 
    18 | 
> 19 | const strings = defineMessages(headerStrings); 
    |    ^
    20 | 
    21 | const Header = (props) => { 
    22 |  return (

Answer 1

defineMessages的行爲不是一個錯誤。這個函數是一個鉤子來「刮」來自組件的默認消息。如果您希望包含來自JSON import的字符串，則defineMessages不是必需的，因爲它的目的是導出默認消息以傳遞給翻譯器。

Answer 2

，確保你是唯一載巴貝爾插件一次，通過.babelrc或webpack.config.js，但不是在這兩個因爲它causes the plugin to be loaded多次，導致在嘗試通過webpack運行時完全相同的錯誤。