Reference Error : macro_1 is not defined.

Describe the bug I’ve been trying to set up linguiJS on my app but I get “macro_1 is not defined” error when trying to compile it. It’s a React Native App using TS.

To Reproduce Follow all the installation process.

npm run extract -try with a msgstr for test npm run compile All seems to work at this point. I get my locales folder with both messages.po and messages.js. There’s also a _build folder in it.

examplefile.tsx

import { t, Trans } from "@lingui/macro";
import { I18nProvider } from "@lingui/react";

import catalogES from "../../locales/es/messages.js";

const catalogs = { es: catalogES };

export default function App() {
   return <I18nProvider language="es" catalogs={catalogs}>
          ....
          ....
              <Text style={styles.boldText}><Trans>Test</Trans></Text>
         </I18nProvider>
}

I’ve also tried with

                                  <I18n>
                                        {({ i18n }) => (
                                            <Button onPress={() => {
                                                this.props.navigation.navigate("Email", { passwordview: "login" });
                                            }} title={i18n._(t`mark messages as read`)}/>
                                        )}
                                    </I18n>

But the same result.

Additional context

The error I get is:

Reference Error : macro_1 is not defined.

This is how the file inside my dist folder looks

examplefile.js

var macro_1 = require("@lingui/macro");
var react_1 = require("@lingui/react");
var messages_js_1 = __importDefault(require("../../locales/es/messages.js"));
var catalogs = { es: messages_js_1.default };

import catalogES from "../../locales/es/messages.js";

const catalogs = { es: catalogES };

export default function App() {
   return (<react_1.I18nProvider language="es" catalogs={catalogs}>
          ....
          ....
              <react_native_1.Text style={styles.boldText}><macro_1.Trans>Test</macro_1.Trans></react_native_1.Text>
         </react_1.I18nProvider>);
}

• jsLingui version 2.7.4
• Babel version

`-- jest@23.6.0
 `-- jest-cli@23.6.0
   +-- jest-config@23.6.0
   | `-- babel-core@6.26.3
   `-- jest-runtime@23.6.0
     `-- babel-core@6.26.3

• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.)

module.exports = function(api) {
    api.cache(true);

    const presets = ["module:metro-react-native-babel-preset", "module:react-native-dotenv"];
    const plugins = ["jest-hoist", "macros"];

    return {
        presets,
        plugins,
    };
};

I’ve runned the following commands too:

npm install --save-dev @types/lingui__core  # types for @lingui/core
npm install --save-dev @types/lingui__react  # types for @lingui/react
npm install --save-dev @types/lingui__macro  # types for @lingui/macro

[bullfrognz]

@Noitham Could you please be more elaborate on what you mean by ‘switching to Babel TS support’? I am experiencing the same error and my project is setup to use typescript. Thanks

[ovidius72]

this is my tsconfig:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "strictNullChecks": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "./node_modules/*",
    "/locale/**",
    "config",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ],
  "include": [
    "./src/**/*",
    "./typings/**/*.d.ts"
  ]
}

I haven’t used the NumberFormat so far, so I can’t tell if it will work.