Empty messages array

[7rulnik]

Hi! I trying use it via Node API like in this example. But metadata always empty.

{ messages: [] }

Code from Babel:

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactIntl = require('react-intl');

var _localesMenu = require('./locales-menu');

var _localesMenu2 = _interopRequireDefault(_localesMenu);

var _greeting = require('./greeting');

var _greeting2 = _interopRequireDefault(_greeting);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var App = function (_Component) {
    _inherits(App, _Component);

    function App(props) {
        _classCallCheck(this, App);

        var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

        _this.state = {
            user: {
                name: 'Eric',
                unreadCount: 4,
                lastLoginTime: Date.now() - 1000 * 60 * 60 * 24
            }
        };
        return _this;
    }

    _createClass(App, [{
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'div',
                null,
                _react2.default.createElement(
                    'h1',
                    null,
                    _react2.default.createElement(_reactIntl.FormattedMessage, {
                        id: 'app.title',
                        defaultMessage: 'React Intl Translations Example'
                    })
                ),
                _react2.default.createElement(_greeting2.default, { user: this.state.user }),
                _react2.default.createElement(
                    'h4',
                    null,
                    _react2.default.createElement(_reactIntl.FormattedMessage, {
                        id: 'app.locales_menu_heading',
                        defaultMessage: 'Locales:'
                    })
                ),
                _react2.default.createElement(_localesMenu2.default, null)
            );
        }
    }]);

    return App;
}(_react.Component);

exports.default = App;

[caiqfrog]

@7rulnik
I also met this problem.
when I commented out the plugins setting of 'react-intl' in .babelrc, it's be resolved.

[ericf]

If either of you can create a simple repo that has the smallest reproducible example of this issue I can debug what's happening and work to resolve it.

[ericf]

Closing this. Feel free to reopen if there's a runnable, reproducible example that I can try.

[toshafed]

@ericf

Hi! I created repo with example:
https://github.com/toshafed/react-intl-empty-messages

type npm run build and it displays empty array of messages

[ericf]

@toshafed It seems this is likely related to #92, #94

[devrlonardi]

Hello,

I'm having a similar situation, I'm using the node APIs as well and so far I couldn't get the plugin to return me any message, this is the script:

const fs = require('fs');
const { transformFileSync } = require('@babel/core');

const presets = ['@babel/env', '@babel/react'];
const plugins = [
  '@babel/plugin-proposal-class-properties',
  [ 'react-intl', {
    'messagesDir': './messages'
  } ]
];

const scanDir = dir => {

  fs.readdirSync(dir).forEach(file => {
    const filePath = `${dir}/${file}`;

    if (fs.lstatSync(filePath).isDirectory()) scanDir(filePath);

    if (file.match(/\.(js|jsx)$/)) {

      const { metadata } = transformFileSync(filePath, { presets, plugins });

      console.log(metadata);

    }

  });

};

scanDir('./src');

The messages in metadata are always empty.
I had a look at the issues you linked, and they're pointing the problem to .babelrc config, fact is that my app is based on Create React App, so I don't have access to it and I'm not going to eject.

Is there any workaround to this or might be a different issue?

react-scripts 2.0.5
react-intl 2.7.1
babel-plugin-react-intl 3.0.1