Global CSS cannot be imported from within node_modules の対処方法(Next.js)
errorの原因
Next.jsでnode_modulesのファイルがcssファイルをインポートした際に起こるエラーです。
解決方法
エラーの原因であるcssのインポートを取り除いて上げることで解決します。
こちらのパッケージを利用することでnode_moduleから.less/.css/.scss/.sass/.stylのインポートを取り除いてくれます。
パッケージの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>
)
}
Author And Source
この問題について(Global CSS cannot be imported from within node_modules の対処方法(Next.js)), 我々は、より多くの情報をここで見つけました https://zenn.dev/elcia/articles/062e754309bbde著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol