Module not found: Error: You attempted to import react which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

[shaitalatgoola]

Compiled with problems:X

ERROR in ../app/src/index.js 5:0-85

Module not found: Error: Can't resolve 'react-native' in 'C:\wamp64\www\goolaMonoRepo\packages\app\src'

ERROR in ./src/index.js 4:0-26

Module not found: Error: You attempted to import C:\wamp64\www\goolaMonoRepo\packages\web\node_modules\react which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.0

[Simbaclaws]

I tried this for the windows platform, and am experiencing the same problem. It looks for files from app/src doing directory traversals from ../app/node_modules and ../../node_modules. The problem is that the node_modules in the directory of the windows package are the ones it should be looking for instead.

Same thing probably applies to other projects such as web...

But it's not doing that.

I'm a bit too unfamiliar with hoisting and how these node_modules are loaded. But to me it seems it's not traversing to the right directory.

It could be that I haven't symlinked correctly because of the workspace...

Some more information in the usage of the repo would be nice.... I'm quite new to the monorepo concept.

Maybe because of the nohoist deprecation?

[ertemishakk]

anyone having the same issue, adjusting your craco.config.js file with the following solves the issue

const webpack = require("webpack");
const { getWebpackTools } = require("react-native-monorepo-tools");
const path = require('path');

const monorepoWebpackTools = getWebpackTools();

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // Allow importing from external workspaces.
      monorepoWebpackTools.enableWorkspacesResolution(webpackConfig);
      // Ensure nohoisted libraries are resolved from this workspace.
      monorepoWebpackTools.addNohoistAliases(webpackConfig);

      // add the top level package as a app source path so our nohoisted
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
          ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      );

      const [ clientSrc ] = webpackConfig.resolve.plugins[scopePluginIndex].appSrcs;
      const psvServices = path.resolve(clientSrc,'../..');

      webpackConfig.resolve.plugins[scopePluginIndex].appSrcs.push(psvServices);

      return webpackConfig;
    },
    plugins: [
      // Inject the "__DEV__" global variable.
      new webpack.DefinePlugin({
        __DEV__: process.env.NODE_ENV !== "production",
      })
    ],
  },
};

also update your craco to v7 , read more here https://github.com/dilanx/craco/issues/475

[edcylau]

Yes, I am having the same issue with my windows build, which local image asset e.g. .png cannot be found as well would love to hear if there's any solution to this.

 LOG  JavaScript logs will appear in your browser console
Error: Unable to resolve module ./app/src/presentation/ui/MainScreen from C:\Users\my-app\packages\windows/.: ./app/src/presentation/ui/MainScreen could not be found within the project or in these directories:
  node_modules
  ..\..\node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

``

the metro.config.js

const path = require("path");
const exclusionList = require("metro-config/src/defaults/exclusionList");
const { getMetroTools, getMetroAndroidAssetsResolutionFix } = require("react-native-monorepo-tools");

// Get the metro settings to make it compatible with Yarn workspaces.
const monorepoMetroTools = getMetroTools({
  reactNativeAlias: "react-native-windows",
});

const metroAndroidAssetsResolutionFix = getMetroAndroidAssetsResolutionFix();

module.exports = {
  resolver: {
    blockList: exclusionList([
      // This stops "react-native run-windows" from causing the metro server to crash if its already running
      new RegExp(
        `${path.resolve(__dirname, "windows").replace(/[/\\]/g, "/")}.*`
      ),
      // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip
      /.*\.ProjectImports\.zip/,

     // Ensure we resolve nohoist libraries from this directory.
     ...monorepoMetroTools.blockList,
    ]),
    // Ensure we resolve nohoist libraries from this directory.
    extraNodeModules: monorepoMetroTools.extraNodeModules,
  },
  // Add additional Yarn workspace package roots to the module map.
  // This allows importing from any workspace.
  watchFolders: monorepoMetroTools.watchFolders,
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true, // Required for macos and windows builds.
      },
    }),
  },
};

Build environment

• Windows 10 Pro 19044.2486 x64
• Visual Studio 2019