Requiring unknown module "3" - react-native

Requiring unknown module "3". If you are sure the module exists, try restarting Metro. You may also want to run 'yarn' or 'npm intall'.
Any one can help me with this erro on react-native. I'm using vscode and android studio.

Firstly, I encountered the same error message. Then I needed to solve the problem which occurred when I changed the folder structure, influences paths of imported files after I ran the app (on runtime). Actually the error message gives us the cause of the problem but I slogged on handling this error as a newbie on React Native. Frankly, the problem we have faced is about the packager as far as i have learnt.
It’s all about how the packager works. Packaging happens once before runtime so those variables don't have values yet.
Variables are components we have imported from other files in our situation.
The packager only works with statically analyzable “imports”. Treat “import” like a keyword.
As an example, let’s imagine you have folders in the root path of your project. If you run your Android Emulator, then packaging is carried through by Gradle under the hood.
import styles from './styles'
import StepCurrent from './images/stepcurrent.png'
import StepDone from './images/stepdone.png'
import StepNext from './images/stepnext.png'
Then if you try to change folder structure and call these components from another path, error occurs because packaging happened at the first phase, running the emulator, before your changes. Emulator does not read your current file paths.
import styles from './exampleFolder/styles'
import StepCurrent from './exampleFolder/images/stepcurrent.png'
import StepDone from './exampleFolder/images/stepdone.png'
import StepNext from './exampleFolder/images/stepnext.png'
So, you can restart your emulator to restart your packager. Then the problem disappears.
References:
The packager only works with statically analyzable 'requires'.
Packaging happens once before runtime.
Solution way is to restart packager.

My solution is reset metro server.
yarn start --reset-cache

Related

How to fix relative module error for a newly created nuxt.js app with starter template?

I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template

Error: Cannot find entry file ./node_modules/react-native-scripts/build/bin/crna-entry.js in any of the roots:

I keep receiving this error when running my App.js for React Native that was working perfectly well before I attempted installing Victory charts. Somehow something broke and after over three hours of work I am unable to figure out a solution. I have tried everything I could find on the web including uninstalling watchman, reinstalling watchman, reverting to React Native 0.55.4, some other recommended commands. Nothing is working.I am so confused.
$ yarn add react-native-scripts
This helped.
I think the other library may hurt the installation part of your package. To solve this issue on IOS you need to add its library like below:
First do 'yarn add react-native-scripts'. In the case that it dose't work continue other steps.
1-Go to the node module of your project and find the package folder and find the ios file inside it.
2- Then drag it into ‘library’ section of your xcode. (It is the subset of your project folders)
3- Then go to ‘build phase’ and in the ‘Link binary with libraries’ add it there by clicking on the plus sign
4- Then in some cases you need to add the correct path of the ios file inside your node module in the xcode. To do that you should go to ‘build setting’ section in the xcode and search header there. Then you need to add the path there below other paths.
5- Then clear everything (cmd+shift+k) and then finally compile it.
I hope it works for you.
In my case the "crna-entry.js" file does exist in the roots and my project should work (nothing have been modified from last time when it does work).
After hours searching, finally I figured out the reason:
the packager's directory checking is case-sensitive and in windows terminal the drive "c:/" will not be auto-corrected to "C:/" which will lead to error.
Hope this will help someone who gets the same error.
Below is the full error message:
The development server returned response error code:404 Cannot find
entry file node_modules/react-native-scripts/build/bin/crna-entry.js
in any of the roots:

Unable to resolve module (Expo, React Native)

Building a React Native app with Expo, the Javascript bundle fails after getting the error Unable to resolve "../stores/__fixtures__/matchlist/matchlistSourceFixture" from "src/containers/MatchlistSwipeContainer.tsx", despite the fact that I am 100% sure this file exists and its relative path in this instance is correct – especially as I’m using VSCode and it complains if the path isn’t right and I’m using VSCode’s autocomplete to begin with.
If I move the file into any other directory that is not with __ dunder affixes and update the relative path accordingly, it can find the file perfectly fine.
I’ve checked other similar topics with Unable to resolve module errors, but they all seem to be related to third-party packages, whereas this is a local file.
Import statement:
import { matchlistSourceFixture } from '../stores/__fixtures__/matchlist/matchlistSourceFixture';
Export statement in the file in matchlistSourceFixture.ts:
export const matchlistSourceFixture = {...}
Attached is an image of the error message in the Expo iOS app. The message stating that the file doesn’t even exist (it has a .ts extension by the way) makes me think the relative path isn’t really the issue here anyway.
Versions:
React 16.3.1
Expo 27.0.0
Exp 54.0.0
It seems like __fixtures__ dirs are blacklisted by default in RN: react-native/local-cli/util/Config.js.
See this comment on overriding the default.

SystemJS can't load aurelia-event-aggregator even though Aurelia has already loaded it

I'm simply trying to import 'aurelia-event-aggregator' into a TypeScript class and I get this error in my console. Even though it says it's loaded and configured aurelia-event-aggregator on lines 5 & 6, it says SystemJS still can't find it. This is especially strange since I'm also (successfully) importing autoinject from 'aurelia-dependency-injection' and customElement from 'aurelia-framework' without a problem, and they seem to be configured/installed identically to the event aggregator on my system via jspm.
My config.js and package.json are here.
I haven't the slightest idea how to start troubleshooting this. Please let me know if there's any other information I can provide.
This is going to sound dumb, but you need to run jspm install aurelia-event-aggregator. I know it's already in your project, but jspm 0.16 doesn't support peer dependencies (at least that's what I remember), so you have to explicitly install it as a top level dep for your app and then it will start working.

flowtype errors in base AwesomeProject

I recently wanted to reset a react-native project to most recent version, and so I initialised the seed project - "AwesomeProject"... The problem is that it comes with 19 flowtype errors "out of the box"
node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js
lines:91,94,97,104,107,137,142,148
node_modules/react-native/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderStyleInterpolator.js
lines:57,68,74,87,94
node_modules/react-native/Libraries/Experimental/WindowedListView.js
lines:629, 629, 665,665
node_modules/react-native/Libraries/Image/Image.ios.js
line:272
I am reluctant to make changes to these files as it may create knock on effects. Does anyone have a work around?
In general, whenever you want flow to ignore a file, you can just specify that file under the [ignore] section of your .flowconfig.
That said, I just react-native init'd a project, using react-native-cli 1.0.0 and react-native 0.29.1, and ran a flow server on the root of my project, and didn't get any errors.