Bear with me, I'm not sure if this is purely a React Native issue, or just an ES6 question in general. But I noticed I'm unable to do this:
import {navBarRouteMapper} from '/src/helpers';
I get an error saying it's unable to resolve the module. I have to do this instead:
import {navBarRouteMapper} from '../../../src/helpers';
Keeping track of folder depth can get a bit unmanageable as the complexity of the app grows. Why am I not able to use an absolute path?
EDIT:
I see people are recommending adding babel, but I don't want to pollute React Native's system. There's obviously transpilation to ES6 already going on. I was hoping for a solution specific to the React Native ecosystem.
There is actually a pretty clean solution for React Native, have a look here: https://medium.com/#davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1#.u47sl3p8x.
TL;DR:
You'll just have to create a package.json file in your src/helpers folder:
{
"name": "#helpers"
}
And you will be able to import it from anywhere:
import { navBarRouteMapper } from '#helpers'
Related
The title may seems a bit confusing, let me explain.
I'm using an opensource library pico which has a not exported object "pico", so I put ?raw keyword to import it in my frontend project with webpack 5.
import "./lib/pico.js?raw";
And it works properly on my frontend page.
--
Then when I want to unit test it by jest, I found jest-raw-loader by this post, but the pico seems won't be imported by using this library.
The ?raw on webpack seems more similar as script-loader library.
And jest-raw-loader seems more similar as raw-loader on older versions.
Although webpack official doc suggest to replace raw-loader with ?raw, but they seem different in my case.
I know I can simply edit this pico.js file to export this object. But what if next time I have a far larger library need to be managed? Is there any other way to import this kind of "not exported" object?
How to avoid the this kind of warning?
My app is working but it gives warning in terminal like below
Compiled with warnings.
/home/karim/Desktop/React-Native/RN-Complete-Guide/node_modules/react-navigation-header-
buttons/src/overflowMenuPressHandlers.js
Attempted import error: 'ActionSheetIOS' is not exported from 'react-native-web/dist/index'.
It is because of of I imported HeaderButtons and HeaderButton from react-navigation-header-buttons like below
import { HeaderButtons } from "react-navigation-header-buttons";
import { HeaderButton } from "react-navigation-header-buttons";
And I am using react-native 4.x veriosn. is there any way to avoid this warning?
This file in the source for react-navigation-header-buttons imports ActionSheetIOS, which is not supported by React Native web applications. This seems like it's probably an issue with React Native web itself, as even importing the ActionSheetIOS component in your project without actually using it will cause a crash from my past experience.
You probably won't be able to use react-navigation-header-buttons for your solution because of this issue. The authors also go on to say in their README that web support is currently experimental:
Supports iOS and Android, web support is experimental.
I'd suggesting either finding a way to avoid this library or flag an issue on the repo to suggest swapping ActionSheetIOS in with a cross-platform action sheet solution like react-native-action-sheet.
in react-native-web/dist/index.js i exported
export { ActionSheetIOS }; and somehow the warning disappeared
I would like to be like to be able to get a relative import:
e.g.
import Router from '#/router/router.js'
import IndexController from '#/controller/index.js'
Is there a easy way to achieve this? I have never set it up myself but I was able to use it with frontendframe works such as react or vue when setting them up through their cli. I'm pretty sure they do it with webpack, but is there a way to achieve this flexibility without adding any additional tooling such as webpack?
When trying to import a module thats not in my node_modules Typescript tells me it cant find the module. The problem im facing is that the module is inside a CMS and i never get it as an actual module.
I can import it with es6 syntax, but behind the scenes its a Java API that returns javascript, and I can only call the functions without knowing 100% the structure of the code behind it (except the JavaDOC).
Ofcourse Typescript tries to import this as usual and cant find the module, example syntax: import PropertyUtil from 'PropertyUtil', where PropertyUtil is the module.
Is there any way I can solve this? I have a workaround currently with building fake modules from the Javadoc but I dont find it reliable enough..
I'm learning ReactJS right now and trying to separate all the components into discrete files.
Is there some strategy to simplify the process of requiring/importing components? It seems rather silly to have import React from 'react'; on the first line of every component file?
I'm using Babel for the import function.
To get around writing import React from 'react' every time, you can use Webpack and:
write a loader that adds the statement import React from 'react' to every JSX file it encounters; or,
use React from a CDN and include it as a Webpack external in your configuration.
I believe that's the recommended way if you want to use the import/export mechanism from ES6 to separate the component.
A way to not do this is to assign React as a global variable, but that kinda defeat the purpose of using import/export.
Indeed we need to do similar things in other languages like Java?