I'm looking for a way to alias paths with React Native so instead of something like:
require('../../blah')
I could do:
require('src/blah')
where 'src' is at the root of the directory.
You can always use the name of your application as "root". (the name that is written in your package.json):
require('<package name>/img/yourimage.png')
It is possible to use the fbjs #providesModule pragma. Basically by prepending your sourcefile with:
/**
* #providesModule blah
*/
it enables you to require('blah') in other files.
AFAIK this functionality is supposed to be for Facebook use only so it might cause warnings or break in the future.
+1 I also need this feature.
Right now I'm using browserify to bundle my js files marking react-native as external, and use the aliasify module for path aliases. As a second step I pass my bundle to the packager.
The only other solution I've found so far is having your modules in the node_modules directory (maybe with links).
Both of these solutions seem hacky and uncomfortable to me...
Related
This is my babelrc file. installed module-resolver and declared root and aliases.
actually this do works!! but underline annoying me... please click images below I cannot post images cause I'm new here.
[https://i.stack.imgur.com/ZzN5O.png]
warning like this - module is not installed i think intelliJ recognize it as module..
[https://i.stack.imgur.com/GTcWx.png]
I changed my root "./" -> "./src" but it didn't work.
I also installed eslint but don't know about that well I think that won't help this problem
has anyone solved this kind of issue before?
IDEA provides no special support for babel-resolver; please follow WEB-28241 for updates.
The problem is that there are dozens of plugins defining their own ways to resolve modules, we can't afford providing special support for all them... You can try using webpack aliases instead, or try a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"components/*": "./src/components/*"
}
});
components here is the alias you have defined in .babelrc
Now you can use imports like
import MyComponent from 'components/core/MyComponent';
in your code
I have installed vue-star-rating module with npm. I want import this module in my JS file
var StarRating = require('vue-star-rating');
When I hover on 'vue-star-rating' shows full path to module and module also exists in noe_modules folder, but when I run my app in console I get a
ReferenceError: require is not defined
message. I have tried also other methods to import, but it still doesn't work.
import StarRating from 'vue-star-rating'
Also, you will need something like Webpack to compile and create the bundle properly. It will not work without a bundler.
Are you using a compiler to generate a bundle?
You can't reference modules this way as require doesn't exist on the client. You need to use something like fuse-box, webpack, etc. to properly handle the require function and include the modules you're referencing in your client bundle.
I am new, and when i first created my app based on the documentation using npm create-react-app i found it there were a lot of package included inside folder node_module when i code and i only use react and react DOM and etc from the basic.
node_modules
acorn
timer
ansi
and many more
I wonder if anyone can help my how to understand each use inside the node_module or where can i find the documentation for each use?
or how can i just reduce to what i want to use only to decrease the app size?
The answers are 2:
because you're using an automated scaffolding tool, which essentially does everything for you, and, you have just to code, it is supposed to locally deploy all the packages it needs to work (for example webpack is needed to bundle your code, babel to transpile it, ...
under node_modules you will find all the packages of the whole app. That's means you will find both your dependencies and the dependencies of your dependencies (this rule has some exceptions and you can find them in the npm documentation.
example:
// your code depends on A
var dependency = require('A');
// but then, inside your A dependency you can also find something similar to:
var b = require('B');
how can i just reduce to what i want to use only to decrease the app size?
You basically can't do it. They are all needed.
Most of the libraries that we pull from npm have dependencies. You may use only react and react-dom but there are react-scripts that require lots of stuff. I don't think that you have to worry about the size of the node_modules. That's not what you are suppose to ship in production.
If you want to see what are these all modules about you may open their folder and fine README.md file.
When using "stencil bundle" is it required to have validated code? It seems it wont export unless the errors are fixed.
It is, yes. But as a temporary solution while in development you can always add some entries to the .eslintignore file (as specified here) present in your root folder. You will have some already there for reference. That will be useful for plugins and modules not written by you that ESLint might not let pass. ;)
I'm putting together a streamlined development process with react and react-native that:
encourages packages,
uses babel to transform es6 to js (it compiles before publishing/installing),
has a playground that let's you play with both native and web components.
The web part of it is perfectly fine. It's the native one that's causing issues and it has to do with react-native's packager.
The bottom line is: if the package is either linked through npm link or required directly from the playground as in require('../../') react-native's dependency resolver will go forever trying to identify dependencies inside my package's node_modules, most times it never finishes doing it.
The temporary solution I've found is to install the package in playground but this involves re-installing it every time I do an update, which isn't great because you can't see your changes right away (even if it would be automated, it would take time).
I believe that a better solution would be to ask the dependency resolver to ignore those specific modules I don't need (those in devDependencies mainly!). I tried mangling react-native/packager/blacklist.js by adding paths to that list and even putting checks against the dependency resolver but none of that would work.
Can someone with more experience with the packager give me a hint as to how I'd go about making the dependency resolver pass? Alternatively, it would be great if the packager could be separated and the transform process left to choice but I don't know if that would be doable either.
I found out the following solution, based on the comment in default.config.js:
* If you need to override any of this functions do so by defining the file
* `rn-cli.config.js` on the root of your project with the functions you need
* to tweak.
Create a rn-cli.config.js in the root of your project with the following contents:
var blacklist = require('react-native/packager/blacklist');
var config = {
getBlacklistRE(platform) {
return blacklist([
/node_modules\/my-package\/excluded-dir\/.*/
]);
}
};
module.exports = config;
The second argument to the blacklist function is an additional list of blacklisted paths, which can be regular expressions. See react-native/packager/blacklist.js for more examples.