Js-lingui: Reference Error : macro_1 is not defined.

[Noitham]

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

  ``+-- [email protected] -- [email protected]
  -- [email protected] +-- [email protected] |-- [email protected]
  -- [email protected] -- [email protected]

- 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
```

[Noitham]

Solved issue by switching to Babel TS support, can be closed.

[ovidius72]

I'm having a similar issue when i upload the app in release mode. I see the error is y.i18n.t is undefined and y.i18n.t is not a function. Don't know what the y is.
While developing it works fine in the Android Emulator Device and in the physical device.
Any suggestion?
Thanks

[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]

@bullfrognz I solved using this babel.config.js file:

module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@lingui/babel-preset-react'],
  plugins: ['macros']
};

install the following dev dependencies:

• "@babel/core": "^7.4.0",
• "@babel/runtime": "^7.4.2",
• "@lingui/babel-preset-react": "^2.7.4",
• "@lingui/cli": "^2.7.4",
• "@lingui/loader": "^2.7.4"
• "@lingui/macro": "^2.7.4"
• "babel-plugin-macros": "^2.5.1",
• "@types/lingui__core": "^2.7.0",
• "@types/lingui__macro": "^2.7.3",
• "@types/lingui__react": "^2.5.2"

[bullfrognz]

@ovidius72 Thank you for sharing your configuration but unfortunately the error still appears I use the NumberFormat component from @lingui/macro package. Would you please share your tsconfig file? Appreciate the help!

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

[ryan-zheng-teki]

Solved issue by switching to Babel TS support, can be closed.

@ovidius72 Thank you for sharing your configuration but unfortunately the error still appears I use the NumberFormat component from @lingui/macro package. Would you please share your tscon

@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

In webpack configuration,there is no need to use ts-loader.Just use babel-loader is enough.In babel.config.js,add the TypeScript support for babel. "@babel/preset-typescript". Then babel will be able to handle typescript and macros.