【Next.js】typescript導入でビルド時にエラーが出る場合の対処方法 - チョッピーデイズ - EC事業支援・ECサイト立ち上げ・Webマーケティング・SEO・ホームページ制作・Web開発・アプリ開発・コーチングチョッピーデイズ

Next.jsにtypescriptの導入方法

コンテンツ

1 Next.jsにtypescriptの導入方法
2 導入時にエラーが発生した場合
3 プロジェクトのビルド

開発でTypeScriptの導入は下記コマンドを実行します。

yarn add --dev typescript @types/react @types/node

導入時にエラーが発生した場合

typescript導入時にエラがー発生した場合、プロジェクトのビルド時に下記エラーが発生する場合があります。

$ yarn dev
yarn run v1.22.17
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
<w> [webpack.cache.PackFileCacheStrategy] Restoring failed for Compilation/modules|~/home/・・・/node_modules/@next/react-refresh-utils/runtime.js from pack: TypeError: Cannot read properties of undefined (reading 'length')
<w> [webpack.cache.PackFileCacheStrategy] Restoring failed for Compilation/modules|~/home/・・・/node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app! from pack: TypeError: Cannot read properties of undefined (reading 'length')

typescript導入コマンド実行時に通信障害や空き容量等でエラーが発生した場合、typescriptが正常にビルドできない状態になります。

その場合は下記手順で入れ直しを実行します。

Node.jsを最新のバージョンにアップグレード

下記コマンドでnvmでNode.jsを最新バージョンにアップグレードします。

Node.js 安定版のバージョンを確認します。

$nvm ls

       v11.10.1
       v12.18.3
        v14.9.0
->      v14.17.0
default -> node (-> v14.17.0)
node -> stable (-> v14.173.0) (default)
stable -> 14.17 (-> 14.17.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/gallium (-> v16.13.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.7 (-> N/A)
lts/fermium -> v14.18.1 (-> N/A)
lts/gallium -> v16.13.0 (-> N/A)

v１16.13.0にアップグレードします。

$nvm install --lts

または

$nvm install v16.13.0

この場合に、容量オーバーの場合下記 curlでエラーが発生する場合あり

$nvm install --lts

‥

curl: (23) Failure writing output to destination

※上記エラーは、snapでcurlをインストールした場合も発生するケースあり。

yarn のインストール

Node.js をアップグレードした場合、yarn も再度インストールする必要があります。

$ npm install -g yarn

node_modulesディレクトリを削除

node_modulesディレクトリを削除します。

$ rm -rf node_modules

typescriptをインストール

下記コマンドでtypescriptをインストールします。

$ yarn add --dev typescript @types/react @types/node

プロジェクトのビルド

$ yarn dev
yarn run v1.22.17
warning ../../../package.json: No license field
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully in 6.2s (172 modules)

ビルド時のエラーが解消されました。