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（リナリア）を導入するまでの手順をまとめています。

Next.jsのプロジェクトへCSS-in-JS ライブラリ Linaria（リナリア）を導入するまでの手順 | T-CREATOR

t-cr.jp

問題のコード

エラーが発生する問題のコードになります。

エイリアスでインポート時のコード

ここでエイリアスでインポートしている箇所がエラーになります。

tsxCopy code# src/pages/index.tsx
import Hoge from '@src/compoents/Hoge'

インポート先のコンポーネントのコード

インポート先のコードはlinariaを利用してコンポーネントを作成しています。

tsxCopy code# 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を追加しています。

jsonCopy code# tsconfig.json

"paths": {
  "@src/*": ["./src/*"]
}

next.config.js

next.config.jsはnext-linariaを読み込んでいます。
エイリアス関連はデフォルトでエイリアスの設定が不要のため特に設定していません。

javascriptCopy code# next.config.js
const withLinaria = require('next-linaria');
module.exports = withLinaria({});

発生するエラー

発生するエラーになります。
'@src/compoents/Hoge' のパスを解決できないと怒られます。

consoleCopy codeerror - ./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がないと動かないようです。

javascriptCopy code# 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;
  },