What is the ~ (tilde) doing in this javascript import?

Question

In the App.tsx taken from the fountain-webapp typescript MVC sample (http://fountainjs.io/), the import contains the following line:

import {IDispatch} from '~react-redux~redux'; 

Visual Studio 2017 underlines this line ("cannot find module") however it does work in the browser. I've never seen this syntax before and don't know what it's attempting to do?

There's an open ticket mentioning it here: https://github.com/FountainJS/generator-fountain-react/issues/70

Answer 1

Tilde (~) used in conjunction with webpack means that a lookup is performed against node_modules to resolve the path.

In other words, it is a predefined alias that resolves to node_modules.

import { IDispatch } from '~react-redux~redux'; 

is equivalent to

import { IDispatch } from 'relative_path_to_node_modules/react-redux~redux'; 

---

EDIT: Unfortunately, I can't cite any documentation about this, it is based on experience, you're welcome to edit this post with a more accurate description.

Now I've noticed the ~redux part as well, so you might want to check out the other answer, because I'm puzzled there as well.