Can you import using absolute paths in React? - javascript

I am able to use this tutorial for React Native, but it doesn't seem to work with React.

You'll have to do this:
Add a package.json file with { “name”: “FOLDER_NAME” } in it to the folder you’d like to import from.
import Thing from ‘FOLDER_NAME/thing’ or import Thing from ‘./thing’
…except when going “up” in the folder structure.
import Blah from ‘../../../../../blah’
In your React Native project, chances are you keep your code in a single folder, such as “app”.
If you have a directory named “app” this is what an absolute path might look like:
import Thing from ‘AwesomeApp/app/some/thing’
What sucks about this is literally all import statements (or require calls, if you’re still into that) would start with “AwesomeApp/app/”, which is a lot to ask, when the alternative is simple to add a series of “../” (the key strokes are just so close together, it’s too easy).
To alleviate this pain point, you can simply add a package.json file inside the folder from where you want to import. In this case since all our code is under the “app” folder, we’d put the file here:
AwesomeApp/app/package.json
Then, add a “name” property to the json file with the folder name as its value (you can call it whatever you’d like, but really, that’ll just confuse people, including you in 6 months). The shorter, the better.
{ “name”: “app” }
Now, you can import using that name as a reference.
import Thing from ‘app/some/thing’

Related

Importing js modules by directory name

I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.

Replacing resource import from old library by import from new library

I had run into a problem in my javascript project. I was using a resource from a library in my project, and I need to replace all instances of it by a resource of the same name, but from another library. The problem is that I'm importing this resource in more than a hundred files alongisde other resources.
What I need is to replace all instances of something that looks like this:
import {someResource, changedResource, anotherResource} from 'old-library'
By this:
import {someResource, anotherResource} from 'old-library'
import {changedResource} from 'new-library'
I need to keep the old imports that includes this resource that I want to get from the new library as well as importing the changed resource from the new library. Is that a way I can do that in Visual Code or I'll need to use some script in order to do that?
right click project root folder ---> find in folder ---> expand the filter
for every "import {someResource, anotherResource} from 'old-library'" you should replace with "import {someResource, anotherResource} from 'old-library'
import {changedResource} from 'new-library'"
example
becomes

Is it possible to avoid long relative import paths on Flow?

Could you point me to an example of how to configure Flow so that I could just use the name of a file for imports instead of long relative paths ?. This implies that the name of my files in my entire working directory are unique.
example:
Directories
pages/components/foo.js
common/types/abc.js
Current import statements
import foo from "../../pages/components/foo"
import abc from "../common/types/abc"
Desired import statements
import foo from "foo"
import abc from "abc"
This is very possible. But first hopefully you're setup your bundling tool to also accept parsing absolute path names because remember that flow does not handle logic it simply does code analysis but would throw errors if you haven't setup the pathing in .flowconfig and flow has no idea how to do a file lookup.
The option you're looking for is module.name_mapper which will repoint your written import into something else based on an ocaml regex.
If you are using create react app or have a setup similar for example you can see the adding flow section to see an example of how they've recommended handling it.

exporting .png files from a library to a React JavaScript project

I'm creating a utility project that will supply React components and resources to my other projects.
I'd like it to include a set of images (mostly .png files for icons) that can then be imported by the child projects.
I can't figure out how to make this work.
I can export the images from the library, and I can see them, name-mangled, in the node_modules of the child project. So, all good so far.
But, import {imgName} from "myLib" does not include the file in the child project's bundle.
It looks to me like my problem is explained by a clue in https://create-react-app.dev/docs/adding-images-fonts-and-files/:
You can import a file right in a JavaScript module. This tells
webpack to include that file in the bundle.
Presumably, CRA is not triggering this webpack behavior in my case, since I'm importing from another module, not from a file.
How can I get things working?
Assume:
I have complete ownership of the library and child projects, so I can change this solution in whatever way works. I just want to have a single common resource for the images.
I don't want to eject my child projects
Ideally, any complexity should be in the library project. The child projects should have minimal complex tooling. (My intent is for this library to be used by a team of other developers, who will want to focus on their own tasks; not on tooling details)
EDIT (ADDED LATER)
Per the comments in the first answer below, I've created a simple example of my problem. See:
Library repo: github.com/deg/media-file-bug-library
Library package: npmjs.com/package/media-file-bug-library
Client repo: github.com/deg/media-file-bug-client
Just pull the client repo and do yarn install and yarn start. This will bring up a little web page that shows the problem:
SCREEN SNAPSHOT:
The Problem is Not in CRA Trigger. Importing Png File like JavaScript Hides a Magic. Here you are importing a Image and Exporting it which then get Processed by bundler and The Bundled Index Actually Exports The name of the Processed Image File Which in Your Case is corss~nAalnlvj.png. That's Why Your Image is Broken but you are able to render name of File, The Case is Same for microbundle or parcel.
How You Can solve it is by separating your assets and components By Placing Images on separate assets folder and place your images there and then add assets to files in your files in package.json
{
.
.
"files": [ "dist", "assets"],
}
And Then Import Image & Using Like This
import React from 'react'
import ico_cross from 'media-file-bug-library-fix/assets/cross.png'
function App() {
return (
<div className="App">
<img src={ico_cross} alt="im"/>
</div>
);
}
For Further Reference Checkout
Here
A Npm Library For Your Fix I Published Npm media-file-bug-library-fix
enter image description here
hey David I found the solution please do check the above screenshot
as in you package just change in index.modern.js
// WebPack doesnt listen as a path it listen
// var cross = "cross~nAalnlvj.png";
// use import rather than simple name as it generate a full absolute path at parent level so that in child level it can be accessible as an Image
import cross from "./cross~nAalnlvj.png"

How to import from '#somefolder' in angular

I was going through someone's code and found this:
import { NGSWUpdateService } from '#ngsw/ngsw-update.service';
The developer has been able to use '#ngsw/ngsw-update.service' instead of original very long path 'src/client/app/shared/ngsw/ngsw-update.service'.
So how to implement the above so that I don't have to import from relatively long paths.
Here's the code.
When you import from a path that is not relative, it'll look into the node_modules folder.
So here, it's just looking for the file ngsw-update.service here: node_modules/#ngsw/ngsw-update.service.
That's the most basic use case but you can only use that those kind of paths with files from your project by defining them into tsconfig.json (within compilerOptions.paths`, see that article for more: https://netbasal.com/sexier-imports-in-typescript-e3c645bdd3c6

Categories