React app is working perfectly in localhost, but shows an error when building on server and doing build locally

user_15294847 0
Viewed 2226

So my react app is working perfectly in the beginning. I re-organized the folder structures and renamed some files to make it more clean. Afterwards, it now works perfectly in localhost but when I try to build it in AWS I got the error:

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 '/*' Creating an optimized production build...

Failed to compile. ./src/components/reports/inventoryVarianceSummary/accounts/InventoryVarianceAccountStores.js Cannot find file '../../../modal/inventoryVarianceSummary/ExportTableAccountStores' in './src/components/reports/inventoryVarianceSummary/accounts'.

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried to do npm run build on my pc then it showed the error

frontend@0.1.0 build react-scripts build

Creating an optimized production build... Failed to compile.

src\components\reports\inventoryVarianceSummary\accounts\InventoryVarianceAccountStores.js Line 268:14: 'ExportTableClassificationStores' is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.

Those files are one of the files I moved/renamed and now it shows error. I double-checked the file path and it is correct. The app loads perfectly in localhost:3000.

Another weird thing is that the ExportTableClassificationStores that shows on npm run build is ExportTableAccountStores when I navigate to the given line. So it looked like it was not updated? But then the AWS error says ExportTableAccountStores and it still can't find it...

Any help? I tried to run npm cache verify but it did not work.

reactjs
2 Answers

This Error May Happen for more than one case, but in general, you need to check these points:

  1. Please check File.js name is correct and its call correct, for example: import File from "File" not import File from "file"
  2. Please make sure you are not importing the same module twice from two different modules, for example: import Menu from "Modle1/Menu"; import Menu from "./Modle1/Menu";
  3. May you import module direct without load default export, for example: import "module" nested of import Module from "./Module"
  4. Since you are moving/renaming files, make sure the paths do not change to the wrong place or its keep assing to old place, for example: import Module from "../A/B" and after Moving its "../../A/B" but in real its must be "../../../A/B"
  5. Make sure about spilling on import module, for example: import module from "Module" will be wrong, its must be import Module from "Module"
  6. Make sure to import default export, but some module dost not has a default export, so you must to determine which module you need to include, for example: import M from "Module" most be: import {M} from "Module";

And make sure to check folders/files name Its correct spelling and your import its correct too! any missing Capital Letter or Small Letter may make an unexpected error. and check the CamelCase rule after that too..

Note: this case sometimes happen between diff OS, windows not like windows as an example...so that the above checks will resolve issuee

user_32881230

EDIT: this happened because I was careless renaming files and folder. You should use:

git mv

if you want to move/rename files. The thing is I renamed some files with uppercase letters but same name (ex... fooBar.js to FooBar.js), you should rename this with git mv

user_152948470
Related