Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RN 0.63 Update - Unable to resolve module ../Components/AccessibilityInfo/AccessibilityInfo #5965

Closed
virginiarcruz opened this issue Sep 11, 2020 · 35 comments
Labels
Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) question

Comments

@virginiarcruz
Copy link

virginiarcruz commented Sep 11, 2020

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!

@ghost ghost added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Sep 11, 2020
@asklar
Copy link
Member

asklar commented Sep 12, 2020

Looks like a dupe of #5604

@virginiarcruz
Copy link
Author

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?

@acoates-ms
Copy link
Contributor

#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)

@chrisglein
Copy link
Member

@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 chrisglein added Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Sep 14, 2020
@virginiarcruz
Copy link
Author

virginiarcruz commented Sep 14, 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')]
};

@ghost ghost added Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) Invalid Triage https://github.com/microsoft/react-native-windows/wiki/Triage-Process (label applied by bot) and removed Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) labels Sep 14, 2020
@chrisglein
Copy link
Member

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 chrisglein added Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) and removed Invalid Triage https://github.com/microsoft/react-native-windows/wiki/Triage-Process (label applied by bot) Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) labels Sep 17, 2020
@virginiarcruz
Copy link
Author

@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. 😔

@ghost ghost added Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) and removed Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) labels Sep 18, 2020
@acoates-ms
Copy link
Contributor

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 acoates-ms added Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) and removed Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) labels Sep 18, 2020
@virginiarcruz
Copy link
Author

virginiarcruz commented Sep 18, 2020

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

@ghost ghost added Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) and removed Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) labels Sep 18, 2020
@acoates-ms
Copy link
Contributor

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

@acoates-ms acoates-ms added Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) and removed Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) labels Sep 18, 2020
@virginiarcruz
Copy link
Author

@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?

@ugrylmz
Copy link

ugrylmz commented Sep 25, 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

@acoates-ms
Copy link
Contributor

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

@ugrylmz
Copy link

ugrylmz commented Sep 28, 2020

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

@acoates-ms
Copy link
Contributor

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

@ugrylmz
Copy link

ugrylmz commented Oct 1, 2020

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,
};

@acoates-ms
Copy link
Contributor

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.

@asklar
Copy link
Member

asklar commented Oct 1, 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?

@ugrylmz
Copy link

ugrylmz commented Oct 6, 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/']
};

@ghost
Copy link

ghost commented Oct 13, 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.

@ghost ghost added the no-recent-activity Issue/PR has gone stale and may be closed (label applied by bot) label Oct 13, 2020
@ugrylmz
Copy link

ugrylmz commented Oct 19, 2020

Is there any solution to my problem?

@ghost ghost removed the no-recent-activity Issue/PR has gone stale and may be closed (label applied by bot) label Oct 19, 2020
@ghost ghost added the no-recent-activity Issue/PR has gone stale and may be closed (label applied by bot) label Oct 26, 2020
@ghost
Copy link

ghost commented Oct 26, 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.

@acoates-ms
Copy link
Contributor

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.

@ghost ghost removed the no-recent-activity Issue/PR has gone stale and may be closed (label applied by bot) label Oct 26, 2020
@ghost ghost added the no-recent-activity Issue/PR has gone stale and may be closed (label applied by bot) label Nov 2, 2020
@ghost
Copy link

ghost commented Nov 2, 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.

@ghost ghost closed this as completed Nov 16, 2020
@lh9403
Copy link

lh9403 commented Jan 29, 2021

Has anyone solved the same problem?

version:
"react-native": "^0.63.4",
"react-native-macos": "^0.63.0-0",

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|.macos.js|.native.js|.js|.macos.json|.native.json|.json|.macos.ts|.native.ts|.ts|.macos.tsx|.native.tsx|.tsx)
  • node_modules/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo/index(.native|.macos.js|.native.js|.js|.macos.json|.native.json|.json|.macos.ts|.native.ts|.ts|.macos.tsx|.native.tsx|.tsx)

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
RunCurrentEventLoopInMode
ReceiveNextEventCommon
_BlockUntilNextEventMatchingListInModeWithFilter
_DPSNextEvent
-[NSApplication(NSEvent) _nextEventMatchingEventMask:untilDate:inMode:dequeue:]
-[NSApplication run]
NSApplicationMain
main
start
0x0

@ghost ghost added Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) and removed no-recent-activity Issue/PR has gone stale and may be closed (label applied by bot) labels Jan 29, 2021
@chrisglein
Copy link
Member

@lh9403 There were a lot of suggestions on this thread for what could be wrong. Have you tried the metro troubleshooting tips and other suggestions?

@chrisglein chrisglein removed the Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) label Feb 8, 2021
@DanielRiera
Copy link

Run npm install and working :)

@ghost ghost added the Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) label Feb 24, 2021
@chrisglein chrisglein removed the Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) label Feb 25, 2021
@avaneeshtripathi
Copy link

@lh9403 Were you able to solve this?

react-native: 0.64.2

@jljonnard
Copy link

I experienced the exact same issue on Android in RN 0.72.4 and deleting the cxx folder in Android/App has worked for me.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) question
Projects
None yet
Development

No branches or pull requests

10 participants