自分で作成したライブラリをNext.jsにインストールした際に、Global CSS cannot be imported from within node_modules.というエラーが立ちはだかりました。
エラー内容
Global CSS cannot be imported from within node_modules.つまり、何がNGかというと、JSファイルにCSSファイルをインポートするのがNG。こういうやつ↓
import '../index.css'ちなみに、Next.jsのページを見ると、作成者・メンテナーがどうにかしろとのこと！
Next.jsには対応させたいので、どうにかすることにしました。
Reach out to the maintainer and ask for them to publish a compiled version of their dependency.
Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.メンテナーに連絡を取り、依存関係のコンパイルされたバージョンを公開するように依頼してください。コンパイルされた依存関係は、CSSファイルや、バンドラー固有の統合を必要とするその他のファイルへの参照を持ちません。
CSS Imported by a Dependency(https://nextjs.org/docs/messages/css-npm)
対応方法
思いついた手段は3つ。
- CSSファイルを使用せず、すべてのスタイルをタグの
style={}に組み込む - CSS in JSやなどのスタイル系ライブラリを使う
- CSSファイルも含めてバンドルする（1つのJSファイルにする）
結局、3つ目のバンドルする方法を選択しました。
理由は、今回作成したライブラリはアニメーションを使用していたので、styleタグだけで実装できそうにないこと。また、CSS in JSなどのライブラリをわざわざ導入するのは面倒だし、あまり依存するライブラリを増やしたくなかったからです。
バンドラー何にした？
最初はwebpackを使用してバンドルしました。でも、ライブラリ作成には、webpackでCSSファイルを含めてバンドルするのはやめた方がいいです。
結局、うまくいったのはrollupでした。一般的にも、ライブラリのバンドルにはwebpackよりrollupが良いと言われているようです。
ちなみに、webpackでCSSファイルを含めたライブラリのバンドルをおすすめしないのは、下記記事のエラーが発生するためです。rollupの設定ファイルも書いておいたので参考にしてみてください。
