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;
},
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実
- review
え?世界はこんなに良くなってた!『FACTFULNESS』ハンス・ロスリングが暴く 10 の思い込みの正体
- review
瞬時に答えが出る脳に変身!『ゼロ秒思考』赤羽雄二が贈る思考力爆上げトレーニング
- review
関西弁のゾウに人生変えられた!『夢をかなえるゾウ 1』水野敬也が教えてくれた成功の本質