next.jsでLinariaをエイリアスでインポート時に発生するエラーの原因と解決策

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
next.jsでLinariaを利用時にエイリアスでインポートするとエラーになる対応をメモしました。
経緯
next.jsへLinariaを適応してプロジェクトの開発を行う検証をしていた際に エイリアスがうまく動かないことがわかったため解決方法を調査しました。
環境
- Mac OS Big SUR 11.3.1
- yarn 1.22.10
- Node 14.17.1
- Next.js 11.0.1
- React: 17.0.2
- Linaria 2.1.0
Linariaの導入
Linariaの導入は下記の記事て紹介している形で導入を行っています。
Next.jsのプロジェクトへLinaria(リナリア)を導入するまでの手順
Next.jsのプロジェクトへCSS-in-JS ライブラリ Linaria(リナリア)を導入するまでの手順をまとめています。
問題のコード
エラーが発生する問題のコードになります。
エイリアスでインポート時のコード
ここでエイリアスでインポートしている箇所がエラーになります。
tsx# src/pages/index.tsx
import Hoge from '@src/compoents/Hoge'
インポート先のコンポーネントのコード
インポート先のコードはlinariaを利用してコンポーネントを作成しています。
tsx# src/compoents/Hoge.tsx
import { styled } from 'linaria/react';
const Box = styled.div`
width: 200px;
`
export default function Home() {
return (
<Hoge>Hoge</Hoge>
)
}
tsconfig
tsconfigはpathsを追加しています。
json# tsconfig.json
"paths": {
"@src/*": ["./src/*"]
}
next.config.js
next.config.jsはnext-linariaを読み込んでいます。
エイリアス関連はデフォルトでエイリアスの設定が不要のため特に設定していません。
javascript# next.config.js
const withLinaria = require('next-linaria');
module.exports = withLinaria({});
発生するエラー
発生するエラーになります。
'@src/compoents/Hoge' のパスを解決できないと怒られます。
consoleerror - ./src/pages/index.tsx
Error: /Users/XXXX/linaria-sample/src/pages/index.tsx: An unexpected runtime error ocurred during dependencies evaluation:
/Users/XXXX/linaria-sample/node_modules/enhanced-resolve/lib/Resolver.js:147
if (err) throw err;
^
Error: Can't resolve '@src/compoents/Hoge' in '/Users/XXXX/linaria-sample/src/pages/index'
It may happen when your code or third party module is invalid or uses identifiers not available in Node environment, eg. window.
Note that line numbers in above stack trace will most likely not match, because Linaria needed to transform your code a bit.
ちなみにコンポーネントと関係ない他の設定ファイルなどのインポートは
エイリアスを利用してインポートができます。
next.config.jsへエイリアスの設定を追加して解決
next.config.jsへエイリアスの設定を追加して解決しました。
エイリアスの設定を追加
alias
とmodules
の設定を記述します。
modules
がないと動かないようです。
javascript# next.config.js
webpack: (config, _options) => {
config.resolve.modules.push(__dirname + '/src');
config.resolve.alias = {
...config.resolve.alias,
'@src': path.resolve(
__dirname,
'./src'
),
};
return config;
},
- article
next.jsでLinariaをエイリアスでインポート時に発生するエラーの原因と解決策
- article
Next.jsプロジェクトへCSS-in-JS ライブラリLinariaを導入する手順
- article
【解決策】Next.js での CORS エラーの原因と対処方法まとめ
- article
Next.js で環境変数を安全に管理するベストプラクティス
- article
shadcn/ui × Next.js:モダンな UI を爆速構築する方法
- article
Next.js の Image コンポーネント徹底攻略:最適化・レスポンシブ・外部 CDN 対応
- article
NextJS で始める Web アプリケーションの多言語・国際化対応の方法
- article
【徹底解説】Next.js での SSG・SSR・ISR の違いと使い分け
- article
React 開発を加速する GitHub Copilot 活用レシピ 20 選
- article
Prisma の公式ドキュメントを使い倒すためのコツ
- article
GitHub Actions × Node.js:テストとデプロイを自動化する
- article
Pinia × TypeScript:型安全なストア設計入門
- article
Obsidian デイリーノート活用術:毎日の思考ログを資産に変える方法
- article
Git で特定のコミットを打ち消す!git revert の正しい使い方
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来