Develop Reference

Javascript ES6 modules name resolution

I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.

Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.

Vuejs, import component file issues

I have a files structure issue that I am trying to fix when referencing components into other components as imports.
The current files setup I have looks like this...
I am working on the file called security_passphrase.vue and within that file I reference 2 files to import as I need to use them there.
import dropdown from '../components/vue_form/dropdown.vue'
import formbutton from '../components/vue_form/form_button.vue'
The compiler cannot find the modules I am trying to load.
Error: Cannot find module '../../components/vue_form/dropdown.vue' from 'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
Error: Cannot find module '../../components/vue_form/form_button.vue'
from
'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
I have tried different ways to make this work but no success. The files I am trying to import are outside of the folder where the file is I am working with.
/concertina_form/security_passphrase.vue /vue_form/form_button.vue
/vue_form/dropdown.vue
Help will be great :)

import dropdown from '../dropdown.vue'
import formbutton from '../form_button.vue'
Should be the correct way to import these files, using ../ goes down one directory which will take you from the concertina_form directory to the vue_form directory.

Importing JavaScript files with the same name as directory they're inside

In my React and Webpack project, I have the following project structure of React components:
Component/
├── Component.jsx
├── index.jsx
└── styles.css
The index.jsx file simply imports and exports Component.jsx; the reason being that in files that require it, it allows the usage of the following:
import Component from '../Component'
as opposed to
import Component from '../Component/Component'
However this seems like it may be an unnecessary extra step which requires all new components to follow suit.
With this in mind, my question is: Can I have the best of both worlds? I want to be able to only have Component.jsx and styles.css in my directory, but not have to use the name twice in my import declaration.

Let me suggest you the following structure I personally like:
Your component tree structure (As an example every component has a different folder structure. It is up to you to keep it clean and tidy. Index.jsx in components folder just normalizes access to those components whoever needs them):
src/components/
Butter/
Butter.jsx
index.jsx
Beets/
Beets.jsx
Cabbage/
index.jsx
Meat.jsx
index.jsx
Content of components/index.jsx
export Butter from './Butter/index.jsx';
export Beets from './Beets/Beets.jsx';
export Cabbage from './Cabbage/index.jsx';
export Meat from './Meat.jsx';
Some container Borscht.jsx somewhere else in your project which uses those components
import {
Beets,
Cabbage,
} from 'src/components';

If your folder already tells you which is the component name, you don't need to put it again in the file name inside it. I use this approach.
All modern editors already solves the trouble with two equal names (ComponentA/index.jsx and ComponentB/index.jsx) for us, by adding the folder name in the tabs.
Note that this is an Vue component, but it's the same thing for React.

One option for webpack users is to install directory-named-webpack-plugin
Install, and then add the following to Webpack's config file:
var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
resolve: {
plugins: [
new DirectoryNamedWebpackPlugin()
]
}
When using require("component/foo") and the path "component/foo" is resolved to a directory, Webpack will try to look for component/foo/foo.js as the entry point.
Caution: While this approach does allow webpack to resolve filenames when building and bundling, your intellisense / tooling options are a different beast altogether. Unless they also have similar functionality, you may lose Go To Definition and Intellisense support by not providing the full reference statically.

angular2 define global file path/namespace

I can't figure out how to define a global file path/namespace.
For example, when we want to import an angular2 component, we would do something like
import { component_name } from '#angular/core'
and this can be called from any folder nested within the main app folder by using the #angular.
Is there a way I can define something similar for my root app folder such as #app, so that I don't have to use ../../../ for deeply nested components?
This would also be useful when the number of feature components gets really high and we want to start referencing sub apps within the root app folder.

I don't know if this could help you. But you can place an index.ts file on your directory e.g. "directives/index.ts" then from your index.ts file, put export codes somewhat like these
export * from "./somename.directive";
export * from "./anothername.directive";
Then you could import the modules inside your directive folder like these
import {SomeName} from "../directives";
import {AnotherName} from "../directives";
instead of this
import {SomeName} from "../directives/somename.directive";
import {AnotherName} from "../directives/anothername.directive";
I'm not sure with deeply nested components though

React & Jest: Cannot find module from test file

Setting up a Jest test ('App-test.js') for a Redux action ('App.js') in a directory app/__tests__:
Here's the header of App.js:
jest.unmock('../../modules/actions/App.js')
import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import * as App from '../../modules/actions/App.js'
In app/ there is a module config.js. This is being imported where it is needed.
The problem is, when I run my Jest tests, such as App-test.js, it is looking for config and not finding it:
FAIL __tests__/actions/App-test.js
Runtime Error
Error: Cannot find module 'config' from 'User.js'
And User.js is importing config like so:
import config from 'config'
User.js is another action being used App.js.
Any ideas?

You should specify the module location, otherwise Node.js will try to guess the location for you, like:
node_modules/config.js
node_modules/config/index.js
node_modules/config/package.json
The problem in your code is the assumption that node will look for the file in the desired location, as you can see in the algorithm I provided in the previous lines.
To fix the issue you have to specify the location inside your User.js file, for example, check the hypothetical file organization:
/
/config.js
/app
/app/User.js
Then, you'd import inside User.js:
import config from '../config.js'
The file config.js is relative to User.js, located in the parent directory.