Site with react-bootstrap fails during deploy

[mry-bigweb]

Hi,
new to Netlify, and very intrigued.

I have just made a starting point for an app using create-react-app and react-bootstrap and wanted to see if i could get it running, and much to my suprise it fails with a message that it can’t find one of the modules i’m using from react-bootstrap - log output:

9:17:52 PM: Failed to compile.
9:17:52 PM: ./src/navigation/navigation.tsx
9:17:52 PM: Cannot find module: ‘react-bootstrap/NavBar’. Make sure this package is installed.
9:17:52 PM: You can install this package by running: npm install react-bootstrap/NavBar.

I have tried rebuilding and clearing the cache, but it gives the same error. The Navnar can’t be installed as per the suggestion.

Site: https://trusting-wozniak-5953d0.netlify.app/

Anybody got any ideas?

Best regards,
Marrtin

[perry]

hey there,

does this work locally?

i’m not quite sure if this is maybe a case issue

[Support Guide] Netlify app builds locally but fails on deploy (case sensitivity)

Last Reviewed By Netlify Support Staff: December 2022 Are you struggling to understand why your project runs locally but errors out with missing files or logs that point toward issues with case when you try and build on Netlify? You are not alone. Often, case (as in: UPPERCASE or lowercase letters in filenames or paths) can cause problems. Here is a guide to understanding how case sensitivity issues present themselves, why they arise, and how you can fix them! 1. Errors you might see Case sens…

or whether you maybe have a missing dependency in your package.json file?

[mry-bigweb]

Hi Perry,

Yes, it does run locally I just tried changing the path of the import to lower case version, but i get the same error:

import Nav from 'react-bootstrap/Nav';
import NavBar from 'react-bootstrap/NavBar';

Gives the same result as:

import Nav from 'react-bootstrap/nav';
import NavBar from 'react-bootstrap/navbar';

It is part of my package.json:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.5",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.7",
    "bootstrap": "^4.4.1",
    "firebase": "^7.14.2",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    **"react-bootstrap": "^1.0.1",**
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "typescript": "^3.8.3"
  },

It seems like a issue between the OS’s but i don’t know how to accomodate it, if it’s something inside the module, react-bootstrap and how they organize their code?

I did read the article you link to, but it seems to assume that is a file i’m in control over that is importing something else with a wrong case.

[perry]

hey there, are you sure this is the right syntax?

"react": "^16.13.1",
**"react-bootstrap": "^1.0.1",**    
"react-dom": "^16.13.1",

[mry-bigweb]

No, not at all, but i think that may be a mistake when pasting or something.
This is how it actually looks:

It works if i use the drag and drop way of uploading the files. It’s something about that module react-bootstrap that doesn’t play nice with your machines

[fool]

I think this is a case sensitive natures of our build environment that you’re running into:

import Nav from 'react-bootstrap/Nav';
import NavBar from 'react-bootstrap/NavBar';

I suspect you develop on OSX or Windows, and those files will be available as react-bootstrap/NavBar or REACT-BOOTSTRAP/NAVBAR or react-bootstrap/navbar - but in our builds, those are all separate files. Recommended best practice is standardizing in your code and the filesystem in lowercase, since it is a bit complicated to reliably change case sensitivity within a git repo from a non-case-sensitive system.

Could you try ALSO changing the case of the import?

so not just this:

import Nav from 'react-bootstrap/nav';
import NavBar from 'react-bootstrap/navbar';

but also this:

import nav from 'react-bootstrap/nav';
import navbar from 'react-bootstrap/navbar';

?

[sungmaxxi]

Thanks fool, just made an account to say this.

on my Windows and macOS machine these compiled fine but on my Linux servers, the package names are case-sensitive

Meaning the code you import should be like this:

import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

[perry]

yes! that is exactly what is going on here - thanks for sharing.

[fool]

OK, so perhaps based on @sungmaxxi’s feedback, this is not the problem. I don’t see any site with your build error still @mry-bigweb - your only site does not seem to have ever produced the log you mention (not sure if you renamed it, or removed the other site). If you can link me back to it, I do need to see what settings you use, as I try to reproduce using your package.json in our build environment.