🕌

Global CSS cannot be imported from within node_modules の対処方法(Next.js)

2022/04/05に公開

errorの原因

Next.jsでnode_modulesのファイルがcssファイルをインポートした際に起こるエラーです。
https://nextjs.org/docs/messages/css-npm
https://github.com/vercel/next.js/blob/main/errors/css-npm.md

解決方法

エラーの原因であるcssのインポートを取り除いて上げることで解決します。
こちらのパッケージを利用することでnode_moduleから.less/.css/.scss/.sass/.stylのインポートを取り除いてくれます。
https://www.npmjs.com/package/next-remove-imports
パッケージを利用するとインポートされるはずだったcssが適応されなくなるので、自分でインポートしましょう。

パッケージのinstall

cmd
npm install next-remove-imports
# or
yarn add next-remove-imports

パッケージの使用方法

next.config.jsに以下の記述を追加します。
next.config.jsが存在しない場合にはプロジェクト直下に追加を行ってください。

// next.config.js
const removeImports = require('next-remove-imports')({
  test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
  matchImports: "\\.(less|css|scss|sass|styl)$"
})

module.exports = removeImports({
  webpack(config, options) {
    return config
  },
})

cssの適応

ここまでで目的のnode_moduleは利用できるようになりますが、cssは適応されなくなっています。改めてcssをインポートしましょう。以下は公式の例です。

Import styles from node_modules

For importing CSS required by a third party component, you can do so in your component. For example:

// components/ExampleDialog.js
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

https://nextjs.org/docs/basic-features/built-in-css-support

Discussion