Installing 'react-bootstrap' on a Gatsby Starter deployed on Netlify

Question

I'm very new to both gatsby and react. I'm making a Contact form and wanted to do it based on a tutorial that used components from react-bootstrap, however I don't know how to install it on my the gatsby starter I've deployed through my github repo.

My code to give an idea:

import React from 'react';

import Layout from '@common/Layout';
import Navbar from '@common/Navbar';

import Header from '@sections/Header';
import About from '@sections/About'; 
import Footer from '@sections/Footer';

import {Row, Col, Container, Form, Button} from "react-bootstrap" 

const IndexPage = () => (
  <Layout>
    <Navbar />
    <Header />
    <About>
      <Container>
        <Form name= "contact v1" method="post" data-netlify="true" onSubmit="submit">
         <input type="hidden" name="form-name" value="contact v1" />
          <Row>
            <Col>
              <Form.Group>
                <Form.Label>First Name </Form.Label>
                <Form.Control required size="lg" type="text"/>
              </Form.Group>
            </Col>
            <Col>
              <Form.Group>
                <Form.Label>Last Name </Form.Label>
                <Form.Control required size="lg" type="text"/>
              </Form.Group>
            </Col>
          </Row>
          <Form.Group>
                <Form.Label>How can we help? </Form.Label>
                <Form.Control required as="textarea" rows="3" placeholder="What do you do?"/>
          </Form.Group>
          <Button type="submit"> Submit </Button>
        </Form>
      </Container>
    </About>
                
    <Footer />
  </Layout>
);

export default IndexPage;

And this is the error when I deploy on Netlify

3:08:08 PM: failed Building production JavaScript and CSS bundles - 15.912s
3:08:08 PM: error Generating JavaScript bundles failed
3:08:08 PM: Can't resolve 'react-bootstrap' in '/opt/build/repo/src/pages'
3:08:08 PM: If you're trying to use a package make sure that 'react-bootstrap' is installed. If you're trying to use a local file make sure that the path is correct.
3:08:08 PM: not finished Generating image thumbnails - 20.910s
3:08:08 PM: error Command failed with exit code 1.
3:08:08 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

score 2 · Accepted Answer · answered Feb 11 '21 at 16:35

2

As you can see in the docs, just run:

npm install react-bootstrap bootstrap

Keep in mind that when you do:

import {Row, Col, Container, Form, Button} from "react-bootstrap"

You are importing the components from the node_modules directory, specifically from react-bootstrap folder, so you need to install the dependency first.

answered Feb 11 '21 at 16:35

Ferran Buireu

28,630
6
39
67

Appreciate the response, where would I run this command? the website is hosted on github, is there a file I can put it in that makes it run on deployment? – user13 Feb 12 '21 at 01:47
1

In the root of your project, locally (same folder level where your `package.json` is). This command will change your `packaje.json` and your `package-lock.json` and will add a new line with the react-bootstrap package information. Once pushed the changes (ensure that builds locally first), Netlify always install the dependencies in the deploy time, so the package will be available – Ferran Buireu Feb 12 '21 at 05:50
Can I ask how do I run the command within github? I understand I run it in the root folder but how? is there an add-on i need to install? I'm very new at all this. – user13 Feb 23 '21 at 11:52
Just open the terminal and run the command. – Ferran Buireu Feb 23 '21 at 11:54

Installing 'react-bootstrap' on a Gatsby Starter deployed on Netlify

1 Answers1