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
Related
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.
I have an CRA typescript installiation and I'm using carbon-addons-iot-react design library.
https://github.com/carbon-design-system/carbon-addons-iot-react
When i check with source-map-explorer i saw my bundle size extremely big because of the carbon-addons-iot-react imports watson icon in a odd way.
You can see it in picture;
source-map
I tried to tree-shaking way to import icons inside my components
import { Add16 } from "#carbon/icons-react"; //this to
import Add from "#carbon/icons-react/es/add/16"; //this
but i think the reason is the way carbon-addons-iot-react imports icons.
I also tried route based code splitting but it's not reducing bucket sizes.
sizes-after-build
I research a little bit for _generated folder and why it's too big. But i can't find anything on the web or issues on their repository. They use PURE React.CreateElement inside buckets, but for some reason my webpack cant threeshake on them if it's the problem.
Anybody have some ideas?
Thank you very much.
We had a similar issue to this and tracked it down to an import of components from UIShell, which was causing the whole icons library to be included in the bundle.
Switch any full path imports from UIShell to import from the top level instead.
Before:
import { HeaderNavigation } from "carbon-components-react/lib/components/UIShell";
After:
import { HeaderNavigation } from "carbon-components-react";
I am trying to rewrite all existing relative paths in my javascript/typescript project to absolute paths.
Example:
import example from "../../example"
would be rewritten to
import example from "src/components/example"
So I am looking for a script or similar to transform all these imports. Preferably it would be possible to run this as an npm script on precommit or similar.
Is there a way to do this?
It looks like imports are done for static analysis and cannot truly be dynamic (Importing modules using ES6 syntax and dynamic path). I am wondering though if you can do something in the tsconfig.json to accomplish this. Under the "compilerOptions: { ..., "paths": { "#components/": "src/components/". I am not sure this will solve your use case but it may be worth a try. So your import would look like:
import { example } from "#components/example"
I also faced this problem and created an ESLint plugin to solve it. You can find it here: https://github.com/qDanik/eslint-plugin-path
I have an ES6 import.
import MyAwesomeComponent from 'packageNameOnlyWithoutPath';
I want to inspect the file packageNameOnlyWithoutPath. But I can't find it. I looked in node_modules but I don't see it there. So it might be hiding out elsewhere in the app.
Is there a canonical way to find the path that leads to packageNameOnlyWithoutPath?
you might want to take a look at index.js file in the packageNameOnlyWithoutPath folder inside the node_modules.
Else use text editors which supports goToDefinition plugin
TL;DR: Check resolve aliases in Webpack (or similar bundler) config or .babelrc
There's two places you can check first.
If you are using a bundler like Webpack, resolve aliases can be declared in the Webpack config file (usually webpack.config.js).
But I have also recently started using pure babel and node. The reoslves can also be declared in the .babelrc file (cleaner approach IMHO).
You should find what you're looking for in one of the above.
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’