logo image

Next.jsにてローカルではビルドできるが、Vercelにデプロイするとビルドでエラーが発生(ModuleNotFoundError)

Icon representing a data.
2022-03-25
Icon show updated_at
2022-03-25
1
Twitter icon.
Next.js
Vercel
JavaScript

Precondition

・ローカルでは問題なくビルドが完了する。
・ローカルサーバーでは閲覧も可能

Fact

Vercelにビルドをすると以下のようなエラーが発生する。

Error log or Error Massage

Failed to compile.
ModuleNotFoundError: Module not found: Error: Can't resolve '../components/Elements/terms/TermsDetailsTitle' in '/vercel/path0/pages'
> Build error occurred
Error: > Build failed because of webpack errors
    at /vercel/path0/node_modules/next/dist/build/index.js:390:19
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1

Cause

ディレクトリでは大文字になっていたが、Jsから指定する文字列が小文字になっていたのが原因。

ディレクトリの構造は以下の感じ

conmponents
├ Elements
 ├ Terms  #TermsのTが大文字
   ├ TermsDetailsTitle.js

importで指定するときに、temsのtを小文字にしていた。

import TermsDetailsTitle from "../components/Elements/terms/TermsDetailsTitle";

Method

大文字小文字を正確に合わせることでエラーが無くなった。

import TermsDetailsTitle from "../components/Elements/Terms/TermsDetailsTitle";
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。
Area to place ads.
Area to place ads.
Comments
There are no comments on this article yet.

Environment Library tools

Next.js
Vercel
JavaScript
在宅専門のフリーランスエンジニアをしています。 得意言語はVBAです。Next.jsとTypescriptを鍛錬中。