import に指定するパスは case insensitive??

webpackとかReactとかExpressで遊んでいた時のことでした。
以下のようなコードを書いていたのですが、ブラウザで動作させた時は確かに動作していました。
(Helloコンポーネントが正しく表示されていた)

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Hello from './components/Hello';

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById('app')
);

しかし、Reactなどとは関係ないwebpackに適用したプラグインが正しく動作していませんでした。
かなり悩んだのですが、import Hello from './components/Hello';のcomponentsのところをComponentsにしたら正しく動くようになりました。
確かに正しいパスはComponentsの方なんですが、逆にReactはなぜ動作していたのか謎でした。

原因

調べてみても情報は出てこなかったので、以下完全に推測です。

babelも使用しているのでimportはrequireに変換されるのですが、これはnode.jsのシステムなようです。
で、requireはOSのファイルシステムに依存しているんじゃないかな〜と思います。
ちらほらそんなIssueを見かけたので・・・
https://github.com/webpack-contrib/css-loader/issues/53

で、私の使用しているOSはMacなので case insensitiveで動作してしまった・・・・と推測しています。

ESlintも導入しているのにエラーを表示してくれない・・・
何か良い手はないかな

追記 ( 2018/05/04 )
npmにパスをチェックしてくれる良い感じのを見つけました。
case-sensitive-paths-webpack-pluginです。

This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk. Using this plugin helps alleviate cases where developers working on OSX, which does not follow strict path case sensitivity, will cause conflicts with other developers or build boxes running other operating systems which require correctly cased paths.

上記説明にある通り、パスが正確に記述されているかをチェックしてくれます。
これにより、OS間の差異を埋めることができます。
実際に試して正確に動作しました！！

babel の import で指定するパスが間違っていても動いてしまう。

import に指定するパスは case insensitive??

原因