Next.js上で外部コンポーネントのビルドに失敗する

Question

前提・実現したいこと

• Next.js上でのreact-calendarの動作

Next.js上でreact-calendarを動作させたいです。
ビルドの際に下記エラーメッセージが表示されます。

発生している問題・エラーメッセージ

❯ yarn build
yarn run v1.21.1
$ next build
Creating an optimized production build  

Failed to compile.

./node_modules/react-calendar/dist/Calendar.css 1:0
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. See https://webpack.js.org/concepts#loaders
> .react-calendar {
|   width: 350px;
|   max-width: 100%;

> Build error occurred
Error: > Build failed because of webpack errors
    at build (~/myActivity/study/react/nextJS/react-calendar/node_modules/next/dist/build/index.js:10:900)
    at <anonymous>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

該当のソースコード

{
  "name": "react-calendar",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "next": "^9.1.7",
    "react": "^16.12.0",
    "react-calendar": "^2.19.2",
    "react-dom": "^16.12.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

// next.config.js
module.exports = {
  transpileModules: ["react-calendar"]
};

// pages/index.js
import React, { useState } from "react";
import Calendar from "react-calendar";

const Index = () => {
  [date, setDate] = useState(new Date());
   return (
    <div>
      <Calendar onChange={setDate} value={date} />
    </div>
  );
};

export default Index;

試したこと

node_moduleでNext.jsでのトランスパイルが実行されていないことが原因と考え、
こちらを参考にnext.config.jsの設定を追記した。

Answer 1

こんにちは、oregaU_MAdaさん

質問拝見しました。
実際、手元で試してみましたが、react-calendarのエントリーポイントの書き出し方がUsage通りに、なされてないような気がしますね。他のバージョンは試していませんが、react-calendarの2.19.2では、以下のように読み出せば、動作しました。

// package.json
{
  "name": "next-react-cal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^9.1.7",
    "react": "^16.12.0",
    "react-calendar": "^2.19.2",
    "react-dom": "^16.12.0"
  }
}

// next.config.js
const withCSS = require('@zeit/next-css');
module.exports = withCSS();

// pages/index.js
import React, { useState } from 'react';
import 'react-calendar/dist/Calendar.css';
import Calendar from 'react-calendar/dist/Calendar';

const Index = () => {
   const [date, setDate] = useState(new Date());

   return (
    <div>
      <Calendar onChange={setDate} value={date} />
    </div>
  );
};

export default Index;

JS内でCSSを展開するためにnext.config.jsにcss-loaderを追加しています。

以上、参考になれば幸いです。

Comments

[oregaU_MAda]

上記手順でビルドできました!
jsファイルで直接呼び出す必要があるのですね。

nextJSを用いない通常のreact環境では成功していたため、混乱していました。
本当にありがとうございます!