React Native: Can't import local files/components - react-native

In my react native cli project I am having trouble importing local files.
I just created the project using cli and it was working fine. I ran it in my mobile and it showed the default welcome message. Then I made src folder, components folder in it and created a Header component.
As soon as I imported the header component in App.js and used it it showed this errror message in my packager console.
Bundling `index.js` [development, non-minified] 0.0% (0/317),failed.
error: bundling failed: UnableToResolveError: Unable to resolve module `./src/components/Header` from `/home/sagar/workspace/native/my_expences/App.js`: could not resolve `/home/sagar/workspace/native/my_expences/src/components/Header' as a file nor as a folder
at ModuleResolver._loadAsFileOrDirOrThrow (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ModuleResolution.js:337:11)
at ModuleResolver._resolveFileOrDir (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ModuleResolution.js:222:17)
at ModuleResolver.resolveNodeDependency (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ModuleResolution.js:236:19)
at ResolutionRequest.resolveDependency (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:111:14)
at dependencyNames.map.name (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:136:10)
at Array.map (<anonymous>)
at ResolutionRequest.resolveModuleDependencies (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:135:42)
at Promise.resolve.then (/home/sagar/workspace/native/my_expences/node_modules/metro-bundler/src/node-haste/DependencyGraph/ResolutionRequest.js:175:21)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
The error goes away if I remove the Header component and the import statement.
Please help
Edit:
It turns out it is having trouble importing file with jsx extension. I changed the extension to js and the error went away.
So, How can I import jsx files.

Related

Cannot use RNFS from react-native-fs

I am receiving this errors after importing RNFS from react-native-fs.
ERROR Invariant Violation: new NativeEventEmitter() requires a non-null argument., js engine: hermes
ERROR Invariant Violation: "ProjectName" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes
I installed and tried to import RNFS from react-native-fs for creating files and saving some data in it.

How to resolve ESLint error unable to resolve path to module 'react-native'

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

Error importing NPM module to nativescript app

Trying to import #nimiq/core or #nimiq/core-web or https://cdn.nimiq.com/nimiq.js to my Nativescript app but I can't found the way.
I've already tried with nativescript-nodeify but it thows and error in nativescript-vue (which I'm using)
Error is: Cannot find module '[...]\platforms\android\app\src\main\assets\app\tns_modules\nativescript-nodeify\patch-npm-packages.js'.

aurelia - error using material-components-web with skelton-esnext project

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';

Uncaught ReferenceError: require is not defined (Typescript)

I'm trying to make this example work in typescript. But for some reason I get an error when I run it: Uncaught ReferenceError: require is not defined
I don't really understand why I am getting this problem (I am quite new to Typescript and Vue).
The reason I use
import Vue = require('../libs/vue/index')
import * as vts from '../libs/vue-typescript-component/vue-typescript-component'
is because my node_modules are not a part of the project, so I link to the files in my libs folder, which as you can see is included in the wwwroot