Site with react-bootstrap fails during deploy

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

hey there,

does this work locally?

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

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

Hi Perry,

Yes, it does run locally :slight_smile: 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.

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

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

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 :confused:

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';

?