react-native-watch-hoisted-modules v0.0.5
As everybody knows, react native and links are not friends. But this library is friends with both.
This library is a simple function that will generate the right configurations for metro.config.js
in order to give to react native a reason to like links in a yarn workspaces world.
Install
npm install --save-dev react-native-watch-hoisted-modules
or
yarn add -D react-native-watch-hoisted-modules
Motivation
So, my RN project cannot find my linked package @doodles/common
when I try to import them. Ok, no problem, we just need
to go metro.config.js
and add the following configurations to the exporting object:
module.exports = {
...
resolver: {
extraNodeModules: {
"@doodles/common": path.resolve(__dirname + '/../../common/')
}
},
watchFolders: [
path.resolve(__dirname + '/../../common/')
]
}
Cool... wait, still not cool. @doodles/common
uses lodash
and due to workspaces this dependency was hoisted to the
root node_modules
and because of that my RN project says @doodles/common
can not find lodash
. Ok, no problem again,
just add it to metro.config.js
like we did with @doodles/common
:
module.exports = {
...
resolver: {
extraNodeModules: {
"@doodles/common": path.resolve(__dirname + '/../../common/'),
"lodash": path.resolve(__dirname + '/../../node_modules/lodash/')
}
},
watchFolders: [
path.resolve(__dirname + '/../../common/'),
path.resolve(__dirname + '/../../node_modules/lodash/')
]
}
So its easy, every time our RN project links to a new package or a new dependency is added to a linked package we just need
to edit metro.config.js
.
No! its not easy. its a pain in the ass!!!
What this function does it simply looks for all linked packages and their dependencies and build the configurations for us. We just need to wrap the current configurations with this function:
const watchHoistedModules = require("react-native-watch-hoisted-modules");
module.exports = watchHoistedModules(__dirname, {
...
})
Now. that's easy!
I don't know if this is a good approach but let's face it, React Native and links are not a good approach at the first place.
This works for my project so I will stick with this hack.