Next.js + typescriptでpathsのエイリアスがModule not foundになる

公開日時

以前、webpack + typescriptでpathsのエイリアスがModule not foundになるというのを書いたが、Next.js + typescriptでも同様の現象が起きたので対応。

yarn add -D tsconfig-paths-webpack-plugin

webpack.config.tsの代わりに[[next.config.js]]に以下を記述すればエイリアスが使えるようになった。

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: (config, options) => {
    if (config.resolve.plugins) {
      config.resolve.plugins.push(new TsconfigPathsPlugin());
    } else {
      config.resolve.plugins = [new TsconfigPathsPlugin()];
    }

    return config;
  }
};

参考


Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある