Js-lingui: Having trouble to get @lingui/macro working with React Native & Typescript

Created on 4 Mar 2019 · 3Comments · Source: lingui/js-lingui

Describe the bug
I'm using react-native with typescript, running .tsx files.
Using the regular import {Trans} from "@lingui/react"; works as a charm, however I'd like to use the macro as it looks a lot more intuitive and clean.

I went down a rabbit hole using rn-nodeify and install path, os, fs, stream, module, buffer, constants, asyncstorage-down which got me further along, though in the end react native still crapped out with an unknown variable buffer. Also this path felt completely wrong to traverse so I abandoned that one :)

To Reproduce
As soon as I change the regal import to import {Trans} from "@lingui/macro"; the build will throw :

error: bundling failed: Error: Unable to resolve module `path` from `/Users/smeevil/dev/react_native_web/sweet_nothings/node_modules/@lingui/macro/node_modules/babel-plugin-macros/dist/index.js`: Module `path` does not exist in the Haste module map

Expected behavior
I expected it to work like advertised :)

Additional context
Add any other context about the problem here.

jsLingui version lingui --version 2.7.4
Babel version npm list babel-core

├─ [email protected]
├─ [email protected]
 │  └─ [email protected]
├─ [email protected]
 │  └─ [email protected]
└─ [email protected]
   └─ [email protected]

Your Babel config

module.exports = {
  presets: ["module:metro-react-native-babel-preset"]
}

web pack config:
https://gist.github.com/6344315aff6677af3153541dc74e4c0a

wontfix

Source

smeevil

Most helpful comment

Found the solution :D
It turned out that I needed to update the babel.config.js.

Previously non working:

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
};

Updated working:

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

This might be something worth to add to the documentation ?
Anyways, feel free to close the issue :)

smeevil on 7 Mar 2019

👍3

All 3 comments

Found the solution :D
It turned out that I needed to update the babel.config.js.

Previously non working:

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
};

Updated working:

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

This might be something worth to add to the documentation ?
Anyways, feel free to close the issue :)

smeevil on 7 Mar 2019

👍3

@smeevil Are u only using babel-loader? I currently have the problem that when using ts-loader and babel-loader together.Then i get something macro_Trans component not found after following the guide on linguijs for typescript. From this link convert to JSX first.Then looks like Babel macros are not working with JSX.Could u help me a bit?
https://lingui.js.org/guides/typescript.html

ryan-zheng-teki on 4 Sep 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.