next.jsにreact-notificationsを導入しようとしてハマったのでメモ

next.jsでreact-notifications用のcssファイルを読み込もうとしたら、Module parse failed: Unexpected character '@' (1:0) というエラーが出た

next.jsで書いたアプリに先日書いたreact-notificationsを導入しようとしたら、コンパイル時に下記のようなエラーが出た。
(導入手順は下記に書いているのとほぼほぼ同じなので割愛します)

shinshin86.hateblo.jp

下記がコンパイル時に出てきたエラー

./node_modules/react-notifications/lib/notifications.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| @font-face {
|   font-family: 'Notification';

調べてみたところ、下記の内容通りに実行したら解決できた

github.com

まずは下記のライブラリをインストール

yarn add --dev @zeit/next-css file-loader url-loader

次にルートに next.config.js を作成し(まだ作成していなければ)、下記の記述を追加

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

これで無事に解決しました。

あまり原因とかはちゃんと追えていないし、next.js 自体まだ理解途中なので、ここらへんはのちほど取り組む予定。

昨日の台風

昨日の台風は大変でしたが、我が家はなんとか無事に乗り切れました。

やはり今がピークのよう pic.twitter.com/CsE9qGdXx5

— Yuki Shindo (@shinshin86) October 12, 2019

ニュースを追っていると、被害が出ているところもたくさんあるようです。今年は台風が猛威をふるっていますね。。
アメリカの友達が台風のたびに連絡をくれて、最近の日本の天気はクレイジーだなと言っていましたが、まったくもって私もそう感じています。
穏やかな気候の毎日が恋しい今日このごろ。