Develop Reference

How is this import working without any relative path?

This is the directory I'm working in:
Now, Auth.js is importing a component from components like this:
import AuthNavbar from "components/Navbars/AuthNavbar.js";
Should'nt it be
import AuthNavbar from "../components/Navbars/AuthNavbar.js";
How is that import even working?

This might be working because your webpack configuration most likely has an alias.

PhpStorm: Different import path

In my JS-Project, I have a package.json in every directory to import for example like this:
import CustomTextComponent from "#components/TextComponent"
instead of
import CustomTextComponent from "../../../components/TextComponent"
Now, PhpStorm marks every import red but everything runs fine. Where can I set another import path that PhpStorm not only checks node_modules?

are you using React native hack for specifying absolute paths? It had never been supported. If you miss this feature, please follow WEB-23221 for updates.
You can try creating a dummy webpack config like it's suggested in https://youtrack.jetbrains.com/issue/WEB-23221#focus=streamItem-27-2719626.0-0 and specifying a path to it in Settings | Languages & Frameworks | JavaScript | Webpack as a workaround

How to define a typescript import path relative to some root (using webpack)?

I'm writing a Vue application that has many components which are nested in different folders. My folder structure looks something like this:
src folder
+components folder
++partA folder
+++A.vue
+++AA.ts
+++subA folder
++++AAA.ts
++partB
+++B.vue
+++BB.ts
Inside my typeScript files, I sometimes need to refer to one of the other components so I end up with code that looks like:
import { something } from '../../partB/BB'
import { another } from './subA/AAA'
Is there a way to setup webpack so that I can always specify the import path to my components relative to the root (src) folder rather than having a bunch of relative paths defined that are specific to the file which is using the import statement?

I found a solution by using webpack's resolve alias: https://webpack.js.org/configuration/resolve/
in conjunction with tsconfig.json (https://www.typescriptlang.org/docs/handbook/compiler-options.html). I needed to specify a baseUrl and paths to match what I have setup in my resolve alias.

react, webpack: avoid ".." in import statements

I'm currently learning react and thus es6/es7 and webpack.
Coming from a largely python background I'm annoyed by the folder sensitive path declarations for import statements, i.e. the use of ../../ in import statements. This means if I move a file to a different directory, i need to change the import statements declared in the file.
Python's import statement doesn't have this issue. I'd like to mimic that behavior
(search first a particular directory for this path, if not search this other base directory)
e.g. if i have the directory structure
myApp
components
component1.jsx
stores
store1.jsx
views
view1.jsx
node_modules
react
etc
in my view1.jsx I don't want to write
import Component1 from '../components/component1'
I want to write
import Component1 from 'components/component1'
or maybe even
import Component1 from 'myApp/components/component1'
just to make sure I don't have name collisions with some npm package I may be using.
What is the correct way of accomplishing this in webpack? Is it using alias?

I ended up following #zerkms recommendation. resolve.modulesDirectories is the way to go.

I wrote a loader to accomplish this, https://www.npmjs.com/package/future-require-loader. It will autoload a path anywhere three underscores surround a partial file path ___filename.js___. it also allows folder paths: ___folder/filename.js___. it will attempt to match the first file path that includes the string so you will want to include folders if there could be a conflict.

EmberJS, How to import files using root path?

I have this a model in this path:
/my-project/app/models/my-model.js
And I want to import it from a route in this path:
/my-project/app/routes/battles/battle/combats/new.js
The import sentence looks like this:
import MyModel from '../../../../models/my-model';
The path is insane, I have to use the try and error system to figure out it. Also if I want to import the same model in another component I can't just copy&paste because this path is only valid from an specific path. For the same reason if I change the path of the component importing my model I have to update the import path.
I would like to have path relative to the root of the project, something like:
import MyModel from '/models/my-model';
Is this possible?

Ember CLI registers everything in app/ under the project name, so the import should look like this:
import MyModel from 'my-project/models/my-model';