react-intlのdefineMessagesがオブジェクト参照を渡すときにエラーをスローするのはなぜですか？

Question

Yahoo!からreact-intlのメールを受信しようとしています。 i18nプロジェクトと私は奇妙な問題に走っています。私の目標は、コンポーネントの外にある種のJSONファイルにベース文字列（英語）を格納して、非デベロッパーが編集できるようにすることです。

importより論理的だと思われますが、コンポーネントで必要な部分を使用していますが、これを行うとdefineMessages関数がエラーを引き起こします。

編集：この問題は、babel-plugin-react-intlプラグインの周りにあり、デフォルトの文字列を「エクスポート」しているようです。アプリはうまく動作しますが、npm run buildコマンドを実行するとエラーが発生します。

.babelrc：

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

のWebPACK-config設定：

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; 

失敗

コード：あなたはWebPACKのと一緒babel-plugin-react-intlを使用している場合

./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

、あなただけロードされていることを確認してください。代わりに、直接オブジェクトの参照を渡そうとしたときに私が取得

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プラグインは、.babelrcまたはwebpack.config.jsのいずれかを使用しますが、両方ともcauses the plugin to be loadedとして複数回使用すると、webpackで実行しようとするとまったく同じエラーが発生します。