44

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

Pete
  • 57,112
  • 28
  • 117
  • 166
Rich
  • 3,640
  • 3
  • 20
  • 24

2 Answers2

39

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.

Community
  • 1
  • 1
Lyubomir
  • 19,615
  • 6
  • 55
  • 69
  • 2
    Can you cite any documentation about this? – Tamas Hegedus Apr 05 '17 at 09:10
  • Is there a module called `react-redux~redux`? Because how does this explain the second `~`, also I couldn't find any such package in the json which was exported here: https://github.com/FountainJS/generator-fountain-react/blob/master/generators/todoMVC/modules/index.js – Divyanshu Maithani Apr 05 '17 at 09:29
  • 1
    good point, I haven't noticed the ~redux part. Now I'm completely puzzled as well. I'll update if I find more info, for now I reference your answer. – Lyubomir Apr 05 '17 at 09:38
  • Also, I think you need to manually add an alias to resolve your lookup path to `node_modules` like `alias: {'~': path.resolve(__dirname)}` – Divyanshu Maithani Apr 05 '17 at 09:40
7

This is a typescript file and the import looks like a typings generated module IMO.

I'm not well versed in typescript but typings probably uses this ~ (tilde) format to check for module dependencies in a particular namespace.

According to Blake Embrey, in this thread on the typings github repo:

It's namespacing for dependencies.

Divyanshu Maithani
  • 13,908
  • 2
  • 36
  • 47
  • 1
    Nice find. From reading that thread it does seem like it's a syntax for walking down the tree of typings files. I'll leave the bounty open for a little while to see if anyone else bites... – Rich Apr 05 '17 at 15:34
  • Yes, this is from `typings`. In post ts@2.0 code you should probably use `@types/redux` and just do `import { IDispatch } from 'redux'` – unional Apr 05 '17 at 18:42
  • Although I can't find any documentation whatsoever for this, I'm accepting this as the likely correct answer. – Rich Apr 06 '17 at 19:42