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.
Related
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
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
New to react native and trying to setup ESLint in my project. I am getting this specific error:
Unable to resolve path to module 'react-native'. (import/no-unresolved)
I searched on SO and found similar threads, but nothing seems to work. I tried cleaning the npm cache as well.
import { AppRegistry } from 'react-native';
There is a red underline on my index.js file in the project root (using Atom editor) and under the word react in the above code snippet.
As per the react native guide
AppRegistry should be required early in the require sequence to make
sure the JS execution environment is setup before other modules are
required.
If you are struggling with es-lint configuration and guess that it's showing false error then you can add .eslinrc file at the root of the project and configure eslint rule as required. I suggest airbnb standard, this guide show full setup here
I've successfully used the material-components-web library from within my aurelia skeleton-esnext-webpack projects but I am strugling to get them working in a skeleton-esnext project.
The problem seems to be with the fact that the skeleton-esnext project uses jspm with system.js as its module loader.
I have added "#material/textfield": "npm:#material/textfield#^0.3.6" to the jspm dependencies section of my package.json which seems to install the correct #material libraries to my jspm_modules/npm/#material.
Now, when I try to access any class from this library from within any my aurelia view models
import {MDCTextfieldFoundation} from '#material/textfield';
I get the following error in the browser when I run the project:
Error: (SystemJS) Unexpected token import
SyntaxError: Unexpected token import
at eval (<anonymous>)
at Object.eval (http://localhost:9000/jspm_packages/npm/#material/textfield#0.3.6.js:1:123)
at eval (....
Any suggestions to whats most likely causing this issue?
SystemJS is importing the raw source file of the plugin instead of the transpiled one (you can see this if you look into jspm_packages/npm/#material/textfield#0.3.6.js.
You can fix it by changing the location in there to point to the dist directory of the directory textfield#0.3.6. However, it gets overriden all the time on potential updates. And it is not saved in CVS.
Another, more simpler approach, would be to import the correct file in your view model:
import {MDCTextfieldFoundation} from '#material/textfield/dist/mdc.textfield';
I want to import ReactNativePropRegistry in my React Native package.
I used to import it from 'react/lib/ReactNativePropRegistry' before React Native 0.38.0 but it has changed to 'react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry' in React Native 0.38.0.
I want my package to be supported on all the React Native versions including 0.38.0 so I did this
if(semver.gte(reactNativeVersion, '0.38.0-rc.0')) {
const ReactNativePropRegistry = require('react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry');
} else {
const ReactNativePropRegistry = require('react/lib/ReactNativePropRegistry');
}
But it seems that the packager tries to resolve the modules statically. So even if reactNativeVersion is less than 0.38.0-rc.0, it tries to resolve the module at this path 'react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry' which causes it to throw an error Unable to resolve module ....
Is there any way get around this?
You cannot do dynamic imports. However, because the React Native packager uses node-haste and both React and React Native use the Haste #providesModule declarations, you may be able to import the module by name without specifying the location:
require('ReactNativePropRegistry');
I haven't tried it for this particular module, but in theory it should work.
It might be good to know that some distant future version of the RN, the packager may drop support for requiring modules by the providesModule name across package boundaries, so this may not be a permanent solution.
However if you're working on a library, eventually you can just deprecate support for versions older than 0.38. Or could you do that already?