unstable_enableSymlinks not work with library with react components with Babel transpilation
bug
I work with a main app and library that contain components
I try to link between App to components to order work on components without publishing it to npm
I use unstable_enableSymlinks in my metro.config file and with watchFolders
see here
https://github.com/YOEL311/reproduceRNLink/blob/cb7aeb59edeabcd0ac5ebc15659765b510c5747a/AppToReproduceLink/metro.config.js#L11C6-L15C3
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const path = require('path');
/**
* Metro configuration
* https://facebook.github.io/metro/docs/configuration
*
* @type {import('metro-config').MetroConfig}
*/
const config = {
watchFolders: [path.resolve(__dirname, '../reproduceComponentsLink')],
resolver: {
unstable_enableSymlinks: true,
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
my library uses Babel to transpile code
in the package.json file i mark this path as main
"main": "./dist/box.js",
I try to use with box component in my app as JSX code this way
import Box from 'my-component';
<Box /> // in jsx
What is the current behavior?
I got error
error: Error: Unable to resolve module react/jsx-runtime from /*****reproduceRNLink/reproduceComponentsLink/dist/box.js: react/jsx-runtime could not be found within the project or in these directories:
../reproduceComponentsLink/node_modules
../../../node_modules
What is the expected behavior? the components displayed on the screen
when I publish my library to npm all work as well
to reproduce issue
git clone [email protected]:YOEL311/reproduceRNLink.git
cd reproduceComponentsLink
yarn link
cd ../
cd AppToReproduceLink
yarn link my-component
yarn android
npx react-native start --reset-cache
got error