metro icon indicating copy to clipboard operation
metro copied to clipboard

unstable_enableSymlinks not work with library with react components with Babel transpilation

Open YOEL311 opened this issue 2 years ago • 0 comments

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

image

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

YOEL311 avatar Nov 26 '23 09:11 YOEL311