NextJSが最新版なのにCSSが読み込まれない！
めちゃ初歩的なミステイクなのですが、1日くらい苦戦したのでいつかの誰かのためにと思って書きます。
- 開発環境
- next: 12.0.7
- react: 17.0.2
- react-responsive-carousel: 3.2.23
自分は最近NextJSを触り始めた者ですが、元々 MaterialUI × styled-components でReactアプリ開発をすることが多かったこともあり、今回も同様な構成にしようとnext.config.jsで色々設定していました。
そして今までは問題なく開発出来ていたのですが、カルーセルを表示させようと react-responsive-carousel を入れたところ、見事に沼りました。
import React from "react";
import Box from "@mui/material/Box";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // 追加
import { Carousel } from "react-responsive-carousel"; // 追加
type CarouselProps = {
srcList: string[];
};
const CustomCarousel = React.memo(({ srcList }: CarouselProps) => (
<Carousel
showThumbs={false}
showArrows
showStatus
autoPlay
infiniteLoop
swipeable
centerMode
centerSlidePercentage={80}
>
<Box mx={1}>
// 画像1
</Box>
<Box mx={1}>
// 画像2
</Box>
<Box mx={1}>
// 画像3
</Box>
</Carousel>
));
export default CustomCarousel;
具体的には上記のようなカルーセルを表示するコンポーネントを記述したのですが（今回導入したモジュールは3行目のようにcssを読み込ませないといけない仕様）、下記 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. エラーに遭遇しました。
ぬえ、ローダーがなくてcss読み込めない？
NextJSってCSS Modulesをビルトインサポートしてるハズだよなぁ...
てかチュートリアルで普通にCSS Modules使えたよなぁ...
とか言いながら、_app.tsxでimportさせてみたり、NextJSのバージョン変えてみたり、モジュールを再度インストールし直したりしてました。
結論 next.config.js のrulesが書き方が悪かっただけでした。
- config.module.rules = [
+ config.module.rules.push(
{
test: /\.[jt]sx?$/ /* babel */,
use: {
loader: "babel-loader",
options: {
presets: ["next/babel"],
},
},
exclude: /node_modules/,
},
{
test: /\.(png|j?g|gif|svg)$/ /* データURLの出力 */,
type: "asset/inline",
exclude: /node_modules/,
},
{
test: /\.(png|j?g|gif|svg)?$/ /* ファイルの出力 */,
type: "asset/resource",
exclude: /node_modules/,
},
- ];
+ );
ReactのWebpackを記述する時の癖でついついrulesを配列で記述していたのですが、NextJSの場合デフォルトでいくつか設定してくれているので push するのが正解でした。
今度デフォルトのrulesの中身を解読します...
Author And Source
この問題について(NextJSが最新版なのにCSSが読み込まれない！), 我々は、より多くの情報をここで見つけました https://zenn.dev/dbly/articles/8741fbfca05828著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol