Zenn
😸

Next13+NetlifyでModule not foundエラーが→gitでフォルダの大文字/小文字が検知されてなかった

2023/05/24に公開
Git
Netlify
Next.js
tech

結論

  • gitでフォルダの大文字小文字が認識されていなかった
    • つまり、ローカルではフォルダ名を大文字小文字に変更したけど、git上では管理されていなく、githubにpushしてもローカルのフォルダ名は存在していなかった
  • 対処法
    • git config core.ignorecase falseを使って変更を感知するようにする
    • git mv -fを使ってファイルやフォルダを更新
    • push

環境

  • M1Mac

状況

2:50:45 PM: "next" at version "13.4.3"
2:50:45 PM: Section completed: initializing
2:50:46 PM: ​
2:50:46 PM: Netlify Build                                                 
2:50:46 PM: ────────────────────────────────────────────────────────────────
2:50:46 PM: ​
2:50:46 PM: ❯ Version
2:50:46 PM:   @netlify/build 29.11.5
2:50:46 PM: ​
2:50:46 PM: ❯ Flags
2:50:46 PM:   baseRelDir: true
2:50:46 PM:   buildId: 646da5a390cf044d0d827c3c
2:50:46 PM:   deployId: 646da5a390cf044d0d827c3e
2:50:46 PM: ​
2:50:46 PM: ❯ Current directory
2:50:46 PM:   /opt/build/repo
2:50:46 PM: ​
2:50:46 PM: ❯ Config file
2:50:46 PM:   No config file was defined: using default values.
2:50:46 PM: ​
2:50:46 PM: ❯ Context
2:50:46 PM:   production
2:50:47 PM: ​
2:50:47 PM: ❯ Installing plugins
2:50:47 PM:    - @netlify/plugin-nextjs@4.37.2
2:50:55 PM: ​
2:50:55 PM: ❯ Using Next.js Runtime - v4.37.2
2:50:56 PM: ​
2:50:56 PM: @netlify/plugin-nextjs (onPreBuild event)                     
2:50:56 PM: ────────────────────────────────────────────────────────────────
2:50:56 PM: ​
2:50:56 PM: No Next.js cache to restore.
2:50:56 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
2:50:56 PM: ​
2:50:56 PM: (@netlify/plugin-nextjs onPreBuild completed in 15ms)
2:50:56 PM: ​
2:50:56 PM: Build command from Netlify app                                
2:50:56 PM: ────────────────────────────────────────────────────────────────
2:50:56 PM: ​
2:50:56 PM: $ npm run build
2:50:57 PM: > teba-portfolio@0.1.0 build
2:50:57 PM: > next build
2:50:57 PM: - warn You have enabled experimental feature (mdxRs) in next.config.js.
2:50:57 PM: - warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
2:50:57 PM: - warn No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
2:50:57 PM: - info Skipping validation of types
2:50:57 PM: - info Linting...
2:50:58 PM: ./components/gallery.tsx
2:50:58 PM: 17:29  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
2:50:58 PM: 34:29  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
2:50:58 PM: 51:29  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
2:50:58 PM: 68:29  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
2:50:58 PM: ./components/works/WorksCard.tsx
2:50:58 PM: 7:21  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
2:50:58 PM: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
2:50:58 PM: - info Creating an optimized production build...
2:51:04 PM: Failed to compile.
2:51:04 PM: 
2:51:04 PM: ./pages/works.tsx
2:51:04 PM: Module not found: Can't resolve '@/components/Works/WorksList'
2:51:04 PM: https://nextjs.org/docs/messages/module-not-found
2:51:04 PM: ./pages/works/page/[slug].tsx
2:51:04 PM: Module not found: Can't resolve '@/components/Works/WorksList'
2:51:04 PM: https://nextjs.org/docs/messages/module-not-found
2:51:04 PM: ./pages/works/skil/[slug].tsx
2:51:04 PM: Module not found: Can't resolve '@/components/Works/WorksList'
2:51:04 PM: https://nextjs.org/docs/messages/module-not-found
2:51:04 PM: > Build failed because of webpack errors
2:51:04 PM: ​
2:51:04 PM: "build.command" failed                                        
2:51:04 PM: ────────────────────────────────────────────────────────────────
2:51:04 PM: ​
2:51:04 PM:   Error message
2:51:04 PM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
2:51:04 PM: ​
2:51:04 PM:   Error location
2:51:04 PM:   In Build command from Netlify app:
2:51:04 PM:   npm run build
2:51:04 PM: ​
2:51:04 PM:   Resolved config
2:51:04 PM:   build:
2:51:04 PM:     command: npm run build
2:51:04 PM:     commandOrigin: ui
2:51:04 PM:     environment:
2:51:04 PM:       - NEXT_PRIVATE_TARGET
2:51:04 PM:     publish: /opt/build/repo/.next
2:51:05 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
2:51:04 PM:     publishOrigin: ui
2:51:04 PM:   plugins:
2:51:04 PM:     - inputs: {}
2:51:04 PM:       origin: ui
2:51:04 PM:       package: '@netlify/plugin-nextjs'
2:51:05 PM: Caching artifacts
2:51:05 PM: Started saving node modules
2:51:05 PM: Finished saving node modules
2:51:05 PM: Started saving build plugins
2:51:05 PM: Finished saving build plugins
2:51:05 PM: Started saving corepack cache
2:51:05 PM: Finished saving corepack cache
2:51:05 PM: Started saving pip cache
2:51:05 PM: Finished saving pip cache
2:51:05 PM: Started saving emacs cask dependencies
2:51:05 PM: Finished saving emacs cask dependencies
2:51:05 PM: Started saving maven dependencies
2:51:05 PM: Finished saving maven dependencies
2:51:05 PM: Started saving boot dependencies
2:51:05 PM: Finished saving boot dependencies
2:51:05 PM: Started saving rust rustup cache
2:51:05 PM: Finished saving rust rustup cache
2:51:05 PM: Started saving go dependencies
2:51:05 PM: Finished saving go dependencies
2:51:05 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
2:51:05 PM: Failing build: Failed to build site
2:51:06 PM: Finished processing build request in 35.259s
works
import WorksList from "@/components/Works/WorksList";

なぜ？？？

githubをよく見てみたら

対処方法

git config core.ignorecase false
git mv -f components/works/WorksCard.tsx components/Works/WorksCard.tsx
git mv -f components/works/WorksList.tsx components/Works/WorksList.tsx
git add .
git push

でOKのはず。

git ls-files

をすると、gitで管理されているファイルやフォルダなどが閲覧できるので、それを参考にmvする。

components/Footer/Footer.tsx
~~省略~~
components/Works/WorksCard.tsx
components/Works/WorksList.tsx
~~省略~~
components/works/WorksCard.tsx
components/works/WorksList.tsx
~~省略~~

今回、自分がした対処法は2回に分けていたので、こちらの方が良いかもしれない。以下、自分が実際にした対処。

自分がした対処

git config core.ignorecase false
git add .
git commit -m "core.ignorecase falseに設定"
git push

すると

このようになってしまったので、

git mv -f components/works/WorksCard.tsx components/Works/WorksCard.tsx
git mv -f components/works/WorksList.tsx components/Works/WorksList.tsx
git add .
git commit -m "重複したフォルダとファイルを削除"
git push

をした。

参考サイト

https://github.com/vercel/next.js/discussions/16179
https://zenn.dev/soma3134/articles/20220726_folder_case_sensitive
https://qiita.com/shoheiyokoyama/items/0fd9f688a269bbdc9da3

Discussion