React-native-windows: RN 0.63 Update - Unable to resolve module `../Components/AccessibilityInfo/AccessibilityInfo`

Created on 11 Sep 2020  路  30Comments  路  Source: microsoft/react-native-windows

I'm having issues updating the react-native version on RNW project.
Currently, the project has:

"react-native-windows": "0.59.0-legacy.1",
"react-native": "0.59.0",

After the update, RN 0.59 for 0.63 then while building a react-native app, happen an error that says:

error: Error: Unable to resolve module `./Libraries/Components/AccessibilityInfo/AccessibilityInfo` from `node_modules\react-native\index.js`: 

None of these files exist:
  * node_modules\react-native\Libraries\Components\AccessibilityInfo\AccessibilityInfo(.native|.windows.jsx|.native.jsx|.jsx|.windows.js|.native.js|.js|.windows.json|.native.json|.json|.windows.ts|.native.ts|.ts|.windows.tsx|.native.tsx|.tsx)
  * node_modules\react-native\Libraries\Components\AccessibilityInfo\AccessibilityInfo\index(.native|.windows.jsx|.native.jsx|.jsx|.windows.js|.native.js|.js|.windows.json|.native.json|.json|.windows.ts|.native.ts|.ts|.windows.tsx|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at Object.resolve (c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\lib\transformHelpers.js:267:42)
    at c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
    at c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (c:\Projects\myproject\mainDirectory\node_modules\react-native\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)

Is there any solution to my problem or this RNW version (0.59) has any limitation to the RN version (0.63)?

Thanks!

Author Feedback no-recent-activity question
Source
picture virginiarcruz

All 30 comments

Looks like a dupe of #5604

asklar picture asklar on 12 Sep 2020

Seems that a similar issue, but my RNW is 0.59 instead of vnext.
So, mean that on the RNW 0.59 is not possible to have the RN 0.63?

virginiarcruz picture virginiarcruz on 14 Sep 2020

5604 is a different issue. This is a metro config issue, not a runtime issue.

I forget the exact setup required for 0.59, but the fact that metro is loading node_modules\react-native\index.js in the first place indicates a metro config error. It shouldn't be loading any files from react-native, and instead be using files from react-native-windows. For windows we redirect all imports for react-native to react-native-windows. Its fairly complex to get the metro config for 0.59 to do that. It got much simpler in 0.62. (Basically the CLI should do it automatically for you)

acoates-ms picture acoates-ms on 14 Sep 2020

@virginiarcruz Can you provide some more info like your metro config? We've been through a lot between 0.59 and 0.63. Like a lot a lot. So we're glad to see you going through this upgrade but a fair amount has happened. How are you approaching your upgrade? Your best experience is likely going to be creating a new empty app and migrating your app JS/native content over to that.

chrisglein picture chrisglein on 14 Sep 2020

@chrisglein
Currently, I have a monorepo as a structure bellow

myproject/
| package.json (monorepo config)
/packages
/project
   | package.json (monorepo config)
   | metro.config

And the metro.config has this config


const path = require('path');
const blacklist = require('metro-config/src/defaults/blacklist');

const parentFolderName = path
  .resolve(__dirname, '..')
  .split(path.sep)
  .pop();

const blacklistRE = blacklist([ AllBlackListContants ]);

module.exports = {
  resolver: {
    blacklistRE,
    sourceExts: ['jsx', 'js', 'json', 'ts', 'tsx']
  },
  watchFolders: [path.resolve(__dirname, '../packages'), path.resolve(__dirname, '../node_modules')]
};
virginiarcruz picture virginiarcruz on 14 Sep 2020

I'm not sure what specifically is going to be wrong with that metro.config. May be fine but it's unclear what's in the blacklist? At first glance it looks like maybe fine? With you being in a monorepo you will need a custom config.

We've seen this error with a stale cache before. Can you try this and let us know if it works or not?
yarn start --reset-cache
(may be needed after an upgrade)

chrisglein picture chrisglein on 17 Sep 2020

@chrisglein
This is my blacklist:

const blacklistRE = blacklist([
  /package-name[^\\/\\]*[\\/\\]node_modules[\\/\\]react-native[\\/\\].*/,
  /package-name[^\\/\\]*[\\/\\]node_modules[\\/\\]react-native-windows[\\/\\].*/,
  new RegExp(`${parentFolderName}[\\${path.sep}]node_modules[\\${path.sep}]react-native[\\${path.sep}].*`),
  new RegExp(`${parentFolderName}[\\${path.sep}]node_modules[\\${path.sep}]react-native-windows[\\${path.sep}].*`),
  /project\\windows\\.*/,
  /project\\.vscode\\.*/
]);

Even doing the reset on bundle the app still displays the same error. 馃様

virginiarcruz picture virginiarcruz on 18 Sep 2020

Why are you blacklisting react-native-windows? That would cause it to not be able to load files from react-native-windows.

Can you also check that your version of @react-native-community/cli is >= 4.9?

acoates-ms picture acoates-ms on 18 Sep 2020

@acoates-ms
My version of @react-native-community/cli@^1.2.1
馃憖

virginiarcruz picture virginiarcruz on 18 Sep 2020

RN 0.63 needs a newer version of the CLI than that. -- You should have >= 4.9.

acoates-ms picture acoates-ms on 18 Sep 2020

@acoates-ms
I updated the react-native-community/cli to ^4.13.0
The app now seems to run but the same error is logged on the bundle.

image

Btw, will be possible to have a 0.59 RNW version and 0.63 RN?

virginiarcruz picture virginiarcruz on 21 Sep 2020

@virginiarcruz the versions must match

asklar picture asklar on 21 Sep 2020

It does look like something is still wrong with what metro is pulling in, as it's grabbing from react-native and not react-native-windows. Did you adjust the blacklist above? It's hard to help more at this point without having access to more of the configuration of your app. If you have a shared repo that'd be best. Or if you can't share everything, maybe the app structure without the app code.

We should have caught the CLI version difference earlier. The bot is going to reply with the command to dump your general environment, which if we need more diagnostics will be helpful.

chrisglein picture chrisglein on 21 Sep 2020

This issue lacks the environment info requested in the bug template. Please edit your issue report to add this information.

If you are using latest version:

  1. npx react-native --version:
  2. npx react-native run-windows --info:

Otherwise if --info doesn't exist:

  1. react-native -v:
  2. npm ls rnpm-plugin-windows:
  3. npm ls react-native-windows:
  4. node -v:
  5. npm -v:
  6. yarn --version:
msftbot[bot] picture msftbot[bot] on 21 Sep 2020

@chrisglein
I can't share the project, unfortunately.
But a have I monorepo with the structure that I put above.

myproject/
| package.json (main monorepo config)
/packages
/project
   | package.json (monorepo config (dirname))
   | metro.config

Here the environment info:

react-native -v: 0.63.2
npm ls rnpm-plugin-windows: @0.3.8
npm ls react-native-windows: 0.59.0-legacy.1
node -v: v12.9.1
npm -v: 6.10.2
yarn --version: 1.22.0
virginiarcruz picture virginiarcruz on 21 Sep 2020

The minor version of react-native and react-native-windows must align. So when using react-native 0.63.X you must use react-native-windows 0.63.X.

You should be getting errors/warnings when running yarn about missing peer dependencies to this affect.

acoates-ms picture acoates-ms on 21 Sep 2020

@acoates-ms
My versions are;
"react-native-windows": "^0.63.0-0"
"react-native": "0.63.2"
I got same issue in monorepo project

aemre picture aemre on 25 Sep 2020

My monorepo project structure is:
myproject/
| package.json (main monorepo config) includes
"workspaces": { "packages": [ "packages/*" ], "nohoist": [ "**/react-native-windows", "**/react-native-windows/**" ] },
/packages
/mobile
| package.json (monorepo config(dirname)) "react-native-windows": "^0.63.0-0","react-native": "0.63.2", "shared": "0.0.1",
| metro.config
| android
| ios
| windows

/shared
| src/setup.js 

import setupApp from 'reduxstore/src/setup';
import setupNavigation from '<mynavigationlibrary>-navigation/src/setup';
import AppNavigator from './navigation/AppNavigator';

const Root = setupApp(setupNavigation(AppNavigator));

export default Root;

also includes
/web

when I run npx react-native run-windows


Error: Unable to resolve module `shared/src/setup` from `index.js`: shared/src/setup could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (C:\repos\.........\.................\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (C:\repos\.........\.................\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (C:\repos\.........\.................\packages\mobile\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at Object.resolve (C:\repos\.........\.................\packages\mobile\node_modules\metro\src\lib\transformHelpers.js:267:42)
    at C:\repos\.........\.................\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (C:\repos\.........\.................\\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
    at C:\repos\BEINCONNECTUI\.........\.................\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\repos\.........\.................\packages\mobile\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)

I am sure the module exists and in mobile other platforms works without any errors.
I tried all of the steps and the result was same.


npx react-native --version: 4.13.0
npx react-native run-windows --info:
 System:
    OS: Windows 10 10.0.17763
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 2.07 GB / 15.87 GB
  Binaries:
    Node: 12.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
    react-native-windows: ^0.63.0-0 => 0.63.3
  Installed UWP SDKs:
    10.0.14393.0
    10.0.17763.0
    10.0.18362.0
react-native-cli: 2.0.1
react-native: 0.63.2
npm ls rnpm-plugin-windows: [email protected] C:\repos\....\......UI\packages\mobile
yarn --version : 1.22.4
node -v : v12.2.0
npm -v: 6.9.0
ugrylmz picture ugrylmz on 25 Sep 2020

@ugrylmz, that import looks like maybe you meant it to be a relative import? './shared/src/setup' instead of 'shared/src/setup'?

acoates-ms picture acoates-ms on 25 Sep 2020

@acoates-ms , I tried but the result is same.

ugrylmz picture ugrylmz on 28 Sep 2020

Can you see if any of the information here helps:
https://microsoft.github.io/react-native-windows/docs/next/metro-config-out-tree-platforms

acoates-ms picture acoates-ms on 28 Sep 2020
👍1

error: Error: Unable to resolve module "@babel/runtime/helpers/interopRequireDefault" from "..\shared\src\setup.js": @babel/runtime/helpers/interopRequireDefault could not be found within the project.
I added to project 

"@babel/core": "^7.5.4",
"@babel/runtime": "^7.5.4",

I tried 

    Clear watchman watches: watchman watch-del-all
    Delete node_modules: rm -rf node_modules and run yarn install
    Reset Metro's cache: yarn start --reset-cache
    Remove the cache: rm -rf /tmp/metro-*

Can you see if any of the information here helps:
https://microsoft.github.io/react-native-windows/docs/next/metro-config-out-tree-platforms

According to the link that you shared, i reconfigured the metro.config file as below: 

/**
聽*聽Metro聽configuration聽for聽React聽Native
聽*聽https://github.com/facebook/react-native
聽*
聽*聽@format
聽*/
const聽path聽=聽require('path');
const聽blacklist聽=聽require('metro-config/src/defaults/blacklist');
const聽extraNodeModules聽=聽{
聽聽'shared':聽path.resolve(__dirname聽+聽'/../shared'),
聽聽'react-native-windows':聽path.resolve(__dirname聽+聽'/windows'),
};
const聽watchFolders聽=聽[
聽聽path.resolve(__dirname聽+聽'/../shared'),
聽聽path.resolve(__dirname聽+聽'/windows')
];

module.exports聽=聽{
聽聽resolver:聽{
聽聽聽聽blacklistRE:聽blacklist([
聽聽聽聽聽聽//聽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/,
聽聽聽聽]),
聽聽},
聽聽transformer:聽{
聽聽聽聽getTransformOptions:聽async聽()聽=>聽({
聽聽聽聽聽聽transform:聽{
聽聽聽聽聽聽聽聽experimentalImportSupport:聽false,
聽聽聽聽聽聽聽聽inlineRequires:聽false,
聽聽聽聽聽聽},
聽聽聽聽}),
聽聽},
聽聽resolver:聽{
聽聽聽聽extraNodeModules
聽聽},
聽聽watchFolders,
};
ugrylmz picture ugrylmz on 1 Oct 2020

I'm guessing you are using yarn workspaces, and the packages in question have been hoisted up to a location that isn't being included in the watchFolders?

Can you provide information about where the @babel/runtime pacakge was installed to? Whats the location on disk of that packaage in node_modules, compared to these windows and shared folders.

acoates-ms picture acoates-ms on 1 Oct 2020

meta-point, is there something we can add to an info command to collect information about their metro env if they're having metro issues? e.g. create a github issue template for "I'm having metro problems" where it collects their metro.config.js, general project structure, etc. but automatic?

asklar picture asklar on 1 Oct 2020

I'm guessing you are using yarn workspaces, and the packages in question have been hoisted up to a location that isn't being included in the watchFolders?

Can you provide information about where the @babel/runtime pacakge was installed to? Whats the location on disk of that packaage in node_modules, compared to these windows and shared folders.

Yes, I am using yarn-worksapaces,
monorepo-project/
/node_modules/@babel/runtime/helpers
| package.json (main monorepo package.json) includes

 "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
       "**/react-native-windows",
        "**/react-native-windows/**"
    ]
  },
"devDependencies": {
    "babel-eslint": "^10.1.0",
    "@babel/runtime": "^7.0.0-beta.55",
    "@babel/core": "^7.0.0-beta.55",
    "better-docs": "2.3.0",
.
.
.
}
````
/packages/mobile/node_modules/@babel/runtime/helpers

/mobile
| android
| ios
|windows
|windows/AppPackages
|windows/ARM
|windows/Debug
|windows/mobile
|windows/packages
|windows/.gitignore
|windows/mobile.sln

| package.json 
````
 "dependencies": {
    "@react-navigation/native": "5.6.1",
    "@react-navigation/stack": "5.6.2",
    "react": "16.12.0",
    "react-native": "0.63.2",
    "react-native-gesture-handler": "1.7.0",
    "react-native-platform-touchable": "^1.1.1",
    "reduxstore": "0.0.1",
    "shared": "0.0.1",
    "react-native-windows": "^0.63.0-0"
  },
  "devDependencies": {
    "@react-native-community/eslint-config": "0.0.7",
    "@react-native-community/netinfo": "5.9.6",
    "@testing-library/jest-native": "3.0.3",
    "@testing-library/react-native": "5.0.1",
    "babel-jest": "25.1.0",
    "@babel/runtime": "^7.0.0-beta.55",
    "@babel/core": "^7.0.0-beta.55",
    "jest": "25.1.0",
    "shared": "0.0.1",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-native-safe-area-context": "^3.1.4",
    "react-test-renderer": "16.12.0"
  }

````
|  babel.config.js 
````
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};
````
| metro.config.js

/**

  • Metro configuration for React Native
  • https://github.com/facebook/react-native
    *
  • @format
    */
    const path = require('path');
    const blacklist = require('metro-config/src/defaults/blacklist');
    const extraNodeModules = {
    'shared': path.resolve(__dirname + '/../shared'),
    'react-native-windows': path.resolve(__dirname + '/windows'),
    'shared-node_modules': path.resolve(__dirname, '/monorepo-project/packages/shared/node_modules'),
    'react-native': path.resolve(${__dirname}/node_modules/react-native)
    };
    console.log('__dirname ------------------------------',__dirname); // C:\monorepo-project\packages\mobile
    console.log('------------------------------',path.resolve(__dirname, '/monorepo-project/packages/shared/node_modules'));
    const watchFolders = [
    path.resolve(__dirname + '/../shared'),
    path.resolve(__dirname + '/windows'),
    path.resolve(__dirname, '/monorepo-project/packages/shared/node_modules'),
    path.resolve(${__dirname}/node_modules/react-native)
    ];

module.exports = {
resolver: {
blacklistRE: blacklist([
// 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/,
]),
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
extraNodeModules
},
watchFolders,
};

```
| react-native.config.js

````
module.exports = {
assets: ['../shared/assets/fonts/']
};

````

ugrylmz picture ugrylmz on 6 Oct 2020

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 14 days of this comment.

msftbot[bot] picture msftbot[bot] on 13 Oct 2020
😕1

Is there any solution to my problem?

ugrylmz picture ugrylmz on 19 Oct 2020

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 14 days of this comment.

msftbot[bot] picture msftbot[bot] on 26 Oct 2020

It looks like to satisfy at least some of your dependencies @babel/runtime was hoisted to the root of the repo. So you'd need to include monorepo-project/node_modules in your watch folders.

acoates-ms picture acoates-ms on 26 Oct 2020

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 14 days of this comment.

msftbot[bot] picture msftbot[bot] on 2 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

davidpodhola picture davidpodhola  路  3Comments
syedibrahimt picture syedibrahimt  路  3Comments
GurtejSafaltek picture GurtejSafaltek  路  3Comments
fatfatson picture fatfatson  路  3Comments
dubiao picture dubiao  路  3Comments