title: React & react-native monorepo: Issue with node_module imports
body: <p>I have set up a monorepo with yarn workspaces housing a react &amp; react-native app. This is is the structure:</p>
  
  <pre><code>├── package.json
  ├── packages
  │   ├── shared
  │   │   ├── package.json
  │   │   └── components
  │   ├── mobile
  │   │   ├── android
  │   │   ├── ios
  │   │   ├── package.json
  │   │   ├── src
  │   │   ├── tests
  │   │   └── yarn.lock
  │   └── web
  │       ├── public
  │       ├── src
  │       └── package.json
  └── yarn.lock
  </code></pre>
  
  <p>In order to share logic between both apps, presentational components are wrapped in a <code>ExampleComponentContainer.js</code> which imports <code>ExampleComponent.native.js</code> or <code>ExampleComponent.js</code>, depending on the bundler. I added redux and react-redux to the shared packages' <code>package.json</code> and import them in ExampleComponentContainer.js and both apps' entrypoints App.js. While webpack has no issues importing the modules from the root node_modules folder, metro only picks the up for the react-native app if i specify them as </p>
  
  <pre><code>import {useDispatch, useSelector} from '../../../../node_modules/react-redux/dist/react-redux';
  </code></pre>
  
  <p>just using </p>
  
  <pre><code>import {useDispatch, useSelector} from 'react-redux';
  </code></pre>
  
  <p>doesnt work. This is the error im getting:</p>
  
  <p><a href="https://i.stack.imgur.com/eWStN.png" rel="nofollow noreferrer">iOS error message</a></p>
  
  <p>This is my metro.config.js:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    projectRoot: path.resolve(__dirname, '../../'),
    transformer: {
      getTransformOptions: async () =&gt; ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
  };
  </code></pre>
  
  <p>Thanks for any hints how to solve this.</p>