(React + Bootstrap) プレーンな React のプロジェクトで bootstrap.min.css.map が見付からない

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー React.js
  • カテゴリー 開発環境

現象

検証のためにサクッとプレーンな React プロジェクトを立てて React Bootstrap を読み込ませようとしました。

すると、以下のエラーが発生してレンダリングができませんでした。

Failed to parse source map from ‘PATH/TO/PROJECT/node_modules/bootstrap/dist/css/bootstrap.min.css.map’ file: Error: ENOENT: no such file or directory, open ‘PATH/TO/PROJECT/node_modules/bootstrap/dist/css/bootstrap.min.css.map’

結果としてはいくつかの施策をしているうちに直ってしまったため、根本原因までは追究していません。ただ、今後同様の事象に遭遇した場合に備えてメモを残しておきます。

現象発生まで

以下、プロジェクトを立ち上げたときの手順です。

> npx create-react-app myapp
> cd ./myapp/
> npm i --save react-bootstrap
> npm i --save bootstrap

> npm start

これらのコマンドを順番に実行していって、冒頭のエラーに遭遇しました (最初は npm i --save bootstrap をしていなかったので後から追加したのですが、追加した後に再度 npm start をしてもそれだけでは直りませんでした)。

対処

プレビューもホットリロードも効かないので困ってしまい、いくつか対処。

  • npm i --save bootstrap
    • 真っ先に不足していることに気付いたので実施。ただし、症状変わらず。
  • .eslintignore を付け足す
    • esConfig
    • プロジェクト直下に .eslintignore を配置、以下の内容を記述しました。
    • ただし npm i --save react-scripts 後にこのファイルを削除しても挙動は変わらなかった (現象発生しなかった) ため関係なかったと思われる。
  • npm i --save react-scripts

ということで、先述の通り深く追求はしていないもののとりあえず解決したのでメモしておきます。

.eslintignore

/node_modules/**

参考

React の新規プロジェクトの始め方

eslint

react-scripts

Bootstrap React Bootstrap

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧