質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

2941閲覧

Vercelでデプロイをしたら「Cannot find module」のエラーが発生。

Autophagy______

総合スコア0

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/06/23 09:13

編集2021/06/25 10:19

前提

React, TypeScript, Next.js, Firebaseで作成したプロダクトをVercelにデプロイしたら以下のエラーが発生しました。

発生している問題・エラーメッセージ

イメージ説明

Type error: Cannot find module '../components/pages/profileEdit/ProfileImageUpload' or its corresponding type declarations.

該当のソースコード

######profileEdit.tsx
イメージ説明

######profileImageUpload.tsx
イメージ説明

######package.json

{ "name": "happyhorse", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@babel/core": "^7.14.6", "@babel/eslint-parser": "^7.14.7", "@babel/preset-react": "^7.14.5", "@material-ui/core": "^4.11.4", "@sendgrid/mail": "^7.4.4", "@tailwindcss/forms": "^0.2.1", "@tailwindcss/line-clamp": "^0.2.1", "@types/node-fetch": "^2.5.10", "alpinejs": "^2.8.1", "data-uri-to-file": "^0.1.8", "eslint-plugin-react": "^7.24.0", "eslint-plugin-tailwind": "^0.2.1", "firebase": "^8.3.0", "firebase-tools": "^9.12.1", "formik": "^2.2.6", "fs": "^0.0.1-security", "next": "^11.0.1", "node-fetch": "^2.6.1", "react": "^17.0.2", "react-beautiful-dnd": "^13.1.0", "react-confirm-alert": "^2.7.0", "react-div-100vh": "^0.6.0", "react-dom": "^17.0.2", "react-dropzone": "^11.3.2", "react-hook-form": "^6.15.5", "react-icons": "^4.2.0", "react-image-crop": "^8.6.6", "react-slick": "^0.28.1", "react-star-ratings": "^2.3.0", "react-textarea-autosize": "^8.3.2", "slick-carousel": "^1.8.1", "uuid": "^8.3.2", "webpack": "^5.40.0", "yup": "^0.32.9" }, "devDependencies": { "@types/node": "^14.14.34", "@types/react": "^17.0.11", "@types/react-dom": "^17.0.8", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "autoprefixer": "^10.2.5", "babel-eslint": "^10.1.0", "eslint": "^7.29.0", "eslint-config-next": "^11.0.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-react-hooks": "^4.2.0", "postcss": "^8.2.8", "prettier": "^2.3.1", "prettier-plugin-firestore-rules": "^0.1.5", "stylelint-config-recommended": "^5.0.0", "tailwindcss": "^2.0.3", "typescript": "^4.3.4" } }

######tsconfig.json

{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext", "es6"], "allowJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "functions/lib/index.js"], "exclude": ["node_modules", "functions"] }

next.config.js

const environment = process.env.NODE_ENV || "development"; const env = require(`./${environment}.env.js`); module.exports = { env: { FIREBASE_PROJECT_ID: env.FIREBASE_PROJECT_ID, }, images: { domains: ["firebasestorage.googleapis.com"], }, node: { global: false, __filename: false, __dirname: false, }, webpack5: true, // webpack: (config) => { // config.node = { // fs: "empty", // child_process: "empty", // net: "empty", // dns: "empty", // tls: "empty", // }; // return config; // }, eslint: { // ignoreDuringBuilds: true, }, };

.eslintrc.js

module.exports = { env: { browser: true, es6: true, }, parser: "@typescript-eslint/parser", parserOptions: { sourceType: "module", ecmaVersion: 2015, requireConfigFile: false, }, plugins: ["react", "@typescript-eslint"], extends: [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "prettier", ], root: true, rules: { "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/no-explicit-any": "off", "init-declarations": ["error", "never"], "react/prop-types": "off", }, };

試したこと・現状

  • 以下の記事を参考に

Next.jsのバージョン: 10.0.6
webpackのバージョン: 4.46.0 に変更してみましたが変わらずエラーが発生したため元に戻しました。
https://qiita.com/someone7140/items/73e72ef66cd580c850de

  • nodeのバージョンの v14.15.0 , v16.4.0 を試したが変化なし。
  • tsconfig.jsonに "baseUrl": "./src"追加→変化なし
  • node_moduleの削除、再インストール
  • yarn, npm のキャッシュ削除
  • webpack4に変更
  • ローカル環境でのyarn lint , yarn build , yarn devは通ります

どうかお助けください、、????‍♀️

また、yarn-error.logというファイルにErrorがあったのですがこれも何か関係あるのでしょうか?

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問