Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

追記 ( 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間の差異を埋めることができます。
実際に試して正確に動作しました!!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away