时间戳

首页 > 解决方案 > React 应用程序在 localhost 中运行良好，但在服务器上构建并在本地构建时显示错误

reactjs - React 应用程序在 localhost 中运行良好，但在服务器上构建并在本地构建时显示错误

问题描述

所以我的反应应用程序在一开始就完美运行。我重新组织了文件夹结构并重命名了一些文件以使其更干净。之后，它现在可以在 localhost 中完美运行，但是当我尝试在 AWS 中构建它时出现错误：

yarn run v1.22.15 $ react-scripts build && aws s3 sync build/ s3://$FRONTEND_S3 && aws cloudfront create-invalidation --distribution-id $CF_DIST_ID --paths '/*' 创建优化的生产版本...

编译失败。./src/components/reports/inventoryVarianceSummary/accounts/InventoryVarianceAccountStores.js 在“./src/components/reports/inventoryVarianceSummary/accounts”中找不到文件“../../../modal/inventoryVarianceSummary/ExportTableAccountStores”。

error 命令失败，退出代码为 1。 info 访问 https://yarnpkg.com/en/docs/cli/run以获取有关此命令的文档。

我试图在我的电脑上执行 npm run build 然后它显示错误

frontend@0.1.0 build react-scripts build

创建优化的生产版本...编译失败。

src\components\reports\inventoryVarianceSummary\accounts\InventoryVarianceAccountStores.js 第 268:14 行：'ExportTableClassificationStores' 未定义 react/jsx-no-undef

搜索关键字以了解有关每个错误的更多信息。

这些文件是我移动/重命名的文件之一，现在它显示错误。我仔细检查了文件路径，它是正确的。该应用程序在 localhost:3000 中完美加载。

另一个奇怪的事情是，当我导航到给定行时，在 npm run build 上显示的 ExportTableClassificationStores 是 ExportTableAccountStores。所以好像没有更新？但随后 AWS 错误显示 ExportTableAccountStores 并且仍然找不到它......

有什么帮助吗？我尝试运行 npm cache verify 但它不起作用。

标签： reactjs

解决方案

此错误可能不止一种情况发生，但一般情况下，您需要检查以下几点：

  1. 请检查 File.js 名称是否正确，其调用是否正确，例如： import File from "File"notimport File from "file"
  2. 请确保您没有从两个不同的模块两次导入相同的模块，例如： import Menu from "Modle1/Menu"; import Menu from "./Modle1/Menu";
  3. 可以直接导入模块而不加载默认导出，例如： import "module"嵌套的import Module from "./Module"
  4. 由于您正在移动/重命名文件，因此请确保路​​径不会更改到错误的位置，或者不会更改为旧位置，例如： import Module from "../A/B"并且在移动它"../../A/B"但实际上它必须是"../../../A/B"
  5. 确保在导入模块上溢出，例如： import module from "Module"将是错误的，它必须是import Module from "Module"
  6. 确保导入默认导出，但是有些模块没有默认导出，所以你必须确定你需要包含哪个模块，例如： import M from "Module"大多数是：import {M} from "Module";

并确保检查文件夹/文件名的拼写是否正确，并且您的导入也正确！任何缺少的大写字母或小写字母都可能会导致意外错误。并在此之后检查 CamelCase 规则..

注意：这种情况有时会在不同的操作系统之间发生，例如 windows 不像 windows ......因此上述检查将解决问题

推荐阅读