为什么在传入对象引用时，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运行时完全相同的错误。