search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.34k stars 1.14k forks source link

Error on metro server after "successfully" loading app #7451

Closed emanuelmartin closed 3 years ago

emanuelmartin commented 3 years ago

Error

Error: EISDIR: illegal operation on a directory, read at Object.readSync (fs.js:592:3) at tryReadSync (fs.js:366:20) at Object.readFileSync (fs.js:403:19) at UnableToResolveError.buildCodeFrameMessage (C:\Users\emanuelmartin\Documents\git\pruebahrsl\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:347:17) at new UnableToResolveError (C:\Users\emanuelmartin\Documents\git\pruebahrsl\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:333:35) at ModuleResolver.resolveDependency (C:\Users\emanuelmartin\Documents\git\pruebahrsl\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:234:15) at DependencyGraph.resolveDependency (C:\Users\emanuelmartin\Documents\git\pruebahrsl\node_modules\metro\src\node-haste\DependencyGraph.js:413:43) at C:\Users\emanuelmartin\Documents\git\pruebahrsl\node_modules\metro\src\lib\transformHelpers.js:317:42 at C:\Users\emanuelmartin\Documents\git\pruebahrsl\node_modules\metro\src\Server.js:1471:14 at Generator.next ()

Environment

Run the following in your terminal and copy the results here.

  1. npx react-native --version: 5.0.1-alpha.2
  2. npx react-native info: System: OS: Windows 10 10.0.21337 CPU: Unknown Memory: 526.00 MB / 3.00 GB Binaries: Node: 14.16.0 - C:\Program Files (x86)\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.11 - C:\Program Files (x86)\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: 16.9.31112.23 (Visual Studio Community 2019) Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.0 => 0.64.0 react-native-windows: ^0.64.0-0 => 0.64.0 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Install and init react-native-windows template
  2. Run windows template
  3. Add up my project files and modules
  4. Windows autolinking
  5. Restart server and Visual Studio
  6. Run for Debug on Local Machine in Visual Studio

Expected Results

Describe what you expected to happen. App to show correctly, but error on Metro appears

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

emanuelmartin commented 3 years ago

Actual package list:

{ "name": "pruebahrsl", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "windows": "react-native run-windows" }, "dependencies": { "@react-native-community/masked-view": "^0.1.10", "moment": "^2.29.1", "moment-timezone": "^0.5.33", "parse": "^3.1.0", "react": "17.0.1", "react-native": "0.64.0", "react-native-code-push": "^7.0.0", "react-native-material-dropdown": "^0.11.1", "react-native-material-dropdown-v2": "^0.11.1", "react-native-material-ripple": "^0.9.1", "react-native-modal": "^11.7.0", "react-native-paper": "^4.7.2", "react-native-reanimated": "^2.0.0", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^2.18.1", "react-native-windows": "^0.64.0-0", "react-navigation": "^4.4.4", "react-navigation-stack": "^2.10.4", "react-redux": "^7.2.2", "redux": "^4.0.5", "redux-thunk": "^2.3.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "7.14.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.64.0", "react-test-renderer": "17.0.1" }, "jest": { "preset": "react-native" } }

jeanmaried commented 3 years ago

I have the same issue when creating a base app by following the Get Started guide here.

Steps to reproduce:

  1. npx react-native init --template react-native-template-typescript
  2. cd projectName
  3. npx react-native-windows-init --overwrite --language cs
  4. npx react-native run-windows

Some side notes. When using React Native Debugger app the app stays on screen that says loading bundle. When using browser debugger, the app fails with the same metro error as @emanuelmartin.

  1. npx react-native --version: 5.0.1-alpha.2
  2. npx react-native info: 
    System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
Memory: 19.88 GB / 31.81 GB
Binaries:
Node: 12.9.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
  AllowDevelopmentWithoutDevLicense: Enabled
  AllowAllTrustedApps: Enabled
  Versions: 10.0.18362.0, 10.0.19041.0
IDEs:
Android Studio: Not Found
Visual Studio: 16.9.31112.23 (Visual Studio Enterprise 2019)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.0 => 0.64.0
react-native-windows: ^0.64.0-0 => 0.64.1
npmGlobalPackages:
*react-native*: Not Found
emanuelmartin commented 3 years ago

@jeanmaried Dunno if it's gonna work, but running npx react-native init <projectName> --template react-native@0.64.0 without the ^0.64 and running PowerShell as admin fixed the problem for the default react-native-windows template. Gonna try it with my project files.

dgellow commented 3 years ago

Hey there. I face the same issue. After some investigation I found out that there is a bug in metro which results in the actual error being misreported: https://github.com/facebook/metro/pull/567/files.

After patching node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js to handle EISDIR correctly the actual error seems to be something along the line of:

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from C:\Users\Samuel\Development\CourseApp2/.: ./debugger-ui/debuggerWorker.aca173c4 could not be found within the project or in these directories:
  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-*
    at ModuleResolver.resolveDependency (C:\Users\Samuel\Development\CourseApp2\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:234:15)
    at DependencyGraph.resolveDependency (C:\Users\Samuel\Development\CourseApp2\node_modules\metro\src\node-haste\DependencyGraph.js:413:43)
    at C:\Users\Samuel\Development\CourseApp2\node_modules\metro\src\lib\transformHelpers.js:317:42
    at C:\Users\Samuel\Development\CourseApp2\node_modules\metro\src\Server.js:1471:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\Samuel\Development\CourseApp2\node_modules\metro\src\Server.js:146:24)
    at _next (C:\Users\Samuel\Development\CourseApp2\node_modules\metro\src\Server.js:168:9)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Edit: note that the issue is present with both templates, react-native@0.64.0 and react-native-template-typescript. Edit2: removing temp files or clearing caches doesn't solve the problem.

NickGerleman commented 3 years ago

Thanks for pulling that up @dgellow!

Looks like @react-native-community/cli pulls in metro 0.64, and this issue is fixed in metro 0.65. I expect this will also effect RN 0.64 for Android/iOS, and will ping some folks to understand if the CLI can pull in a newer version of metro.

emanuelmartin commented 3 years ago

So will npm install metro@0.65fix the bug? Sorry if it sounds so dummy, I have no that much experience :(

dgellow commented 3 years ago

Hmm, I'm not so sure updating only metro@0.65 would fix the underlying problem but should fix the EISDIR handling, but I don't really know.

I tried to add the following config in my package.json but that didn't fix the problem:

  "resolutions": {
    "metro": "^0.65.0",
    "metro-config": "^0.65.0",
    "metro-core": "^0.65.0",
    "metro-react-native-babel-transformer": "^0.65.0",
    "metro-resolver": "^0.65.0",
    "metro-runtime": "^0.65.0"
  },

Let's wait and see what the React Native CLI folks have to say.

chrisglein commented 3 years ago

I also hit this. I noticed that in the error text what was my app name (let's say "camelCase") was losing capitalization ("camelcase"). When I created an app name that doesn't have capitalization it works ("asdf").

So, there's a workaround at least while we figure this out.

chrisglein commented 3 years ago

@emanuelmartin , @jeanmaried , @dgellow and whoever is hitting this: can you confirm what the project name was that you passed to init? (e.g. I tried "githubDashboard" and it hit this error and I tried "src" and it was fine (terrible name for an app though 😅))

Also note, you can't use hyphens either :/ (issue here)

emanuelmartin commented 3 years ago

I did first a pruebaWin and then noted the caps error, so I made a new one named as pruehahrsl. Still having the issue 😪

jonthysell commented 3 years ago

I think this was broken by https://github.com/react-native-community/cli/pull/1370

They have put package.json and app.json out of sync.

I repro the issue if I do this:

npx react-native init ProgressApp
cd .\ProgressApp\
npx react-native-windows-init --overwrite
npx react-native run-windows

In package.json the project name is progressapp, but in app.json the name is ProgressApp. All of the android/ios files key off the progressapp name, however index.js registers the App component as ProgressApp.

Our app native app template uses the value from package.json for everything, files names, namespaces, etc, including hardcoding the component to load:

<react:ReactRootView 
        x:Name="ReactRootView"
        ComponentName="progressapp"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
        MinHeight="400"/>
acoates-ms commented 3 years ago

Sounds like we should be using the value from app.json instead of the one from package.json? -- What does android/iOS do?

jonthysell commented 3 years ago

Yeah, we need to use the value from package.json for generating file names, and the value from app.json for the ComponentName that the ReactRootView loads. Working on a fix now.

NickGerleman commented 3 years ago

Know why we would still be seeing this error on Android + OS X?

NickGerleman commented 3 years ago

Should only affect 0.64 so removing the 0.63 tag.

dgellow commented 3 years ago

@chrisglein Wow, you're right! I created a new project using a lowercase name and everything seems to work fine.

jeanmaried commented 3 years ago

@chrisglein I used Test1 and Test2. I will give it a try all lowercase next time.

NickGerleman commented 3 years ago

Keeping this open bc the referenced PR deals with an issue this one covers, but doesn't address the specific metro error showing erroneously.

asklar commented 3 years ago

@NickGerleman @jonthysell Is the remaining issue a Metro issue? If so, is there a Metro bug tracking it?

NickGerleman commented 3 years ago

There was a bug resolved in Metro linked above that's the likely culprit, but the community CLI is bringing in an older version of metro. Some discussion on the #releases channel but I'm not sure anyone is actively looking at it yet.

alexghi commented 3 years ago

any updates on this?

jonthysell commented 3 years ago

any updates on this?

Are you still hitting this? The underlying bug that causes this to start happening in master, 0.64, and 0.63 was fixed.

AFAIK metro still has a bug about reporting the correct error messages, but you shouldn't hit any error if you take the fix.

NickGerleman commented 3 years ago

Another possibility could be that different Metro errors than the uppercase/lowercase one are occurring that lead to the issue.

Circumstantially, the code in the Metro bug mentions doing source-map resolution. I wonder if it shows up on affected setups any time we redbox, and RN needs to ask metro to symbolicate the callstack.

jonthysell commented 3 years ago

Right, first establishing that the user has updated with the lowercasing fix, or can apply the fix manually.

But if they're still seeing EISDIR in metro, they should look to the redbox for the real error. That's how I found the lowercasing bug, the redbox error very clearly said it couldn't find component in the app registry, which pointed me to where we registered the wrongly-cased name.

KaliEtQuali commented 3 years ago

Hi, What is the redbox and how can we have a look at it please ?

jonthysell commented 3 years ago

Hi, What is the redbox and how can we have a look at it please ?

If the UWP app is running in debug mode, the "redbox" is the error dialog shown within the app. Usually it matches any error displayed in the metro server, except that that's the underlying metro bug we're discussing - metro shows EISDIR because it can't find the files but the app's redbox dialog shows the actual error.

guidelazeri commented 3 years ago

Any updates? I'm upgrading the RN in our project from 0.59.9 to 0.63.4 and this error is happen in Android build. The app is crashing and only works in debug mode.

NickGerleman commented 3 years ago

This issue is fixed by a new external dependency in react-native 0.65. I think we can likely close this issue, since this should be resolved by the newer version of React Native.

For anyone effected, please try to take a look at your app for a more descriptive "Redbox" error. This error will show up correctly in your console again in that version.

ghost commented 3 years ago

This issue is reported on an older version of React Native for Windows than is current, and is believed to be fixed in the latest version. Please try to update to the latest version and confirm if your issue still occurs. Per-version documentation is available here

ghost commented 3 years ago

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.

emanuelmartin commented 3 years ago

Besides the Case issue with app's name, I found out today error message Invariant Violation: Module AppRegistry is not a registered callable module

After digging in a lot, I found out that Parse SDK had a wrong import at \parse\lib\react-native\EventEmitter.js to work on Windows.

Just changed var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter'); To import EventEmitter from '../../../react-native/Libraries/vendor/emitter/EventEmitter';

Everything works now as it should do!