Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gatsby with bootstrap and jquery #3182

Closed
AAverin opened this issue Dec 11, 2017 · 17 comments
Closed

Gatsby with bootstrap and jquery #3182

AAverin opened this issue Dec 11, 2017 · 17 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@AAverin
Copy link

AAverin commented Dec 11, 2017

I have a mixed project – not all of it is full-react, unfortunately, there are some pieces of code that I have to render as plain html and use some jquery scripts to operate it. No way to re-write to react.
Anyways,
I am trying to integrate jquery with bootstrap, and keep having issues.
First I tried with ReactHelmet, but bootstrap was always complaining that jquery is missing.
Bootstrap docs say to add it's scripts to the end of ,

So I have overriden html.js and added bootstrap there.
Now the problem is, when I run this thing and check the code – <script> tags no longer have crossorigin parameter in them, and I get an error that:

Subresource Integrity: The resource 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

screen shot 2017-12-11 at 09 28 23

How can I make gatsby keep crossorigin?

@mpolinowski
Copy link

Hey AAverin,

have you tried using Bootstrap React Components instead?

There is one option for BS3
https://react-bootstrap.github.io/getting-started.html

And another for BS4
https://reactstrap.github.io

I used them together with create-react-app before Git Repo and they work great.

Right now I am working on a Gatsby/Material UI project and the workflow is pretty similar.

@AAverin
Copy link
Author

AAverin commented Dec 11, 2017

@mpolinowski I don't really use much stuff from bootstrap in the project – mostly css and one modal popup from the button.
I was hoping to just add bootstrap the old way and finish with it =)

@mpolinowski
Copy link

I think that is the perfect use case for a react component - just import the Modal component to your site and be done. No need to add all that Bootstrap CSS:

https://reactstrap.github.io/components/modals/

@AAverin
Copy link
Author

AAverin commented Dec 13, 2017

@mpolinowski do you have examples on how to integrate it with Gatsby?
Should I have some kind of plugin?

I would like to have my own css for bootstrap – I already made some changes there.
So I need bootstrap.js with jquery/popper in my project

@calpa
Copy link
Contributor

calpa commented Dec 14, 2017

Integrity attribute is to allow the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.

@AAverin In your case, try to remove integrity property.

You may have a look in What are the integrity and crossorigin attribute? - stackoverflow

@mpolinowski
Copy link

@AAverin Sorry for the delay - I did not have an example repo online and I am working on building one right now - Github Link

1.) reactstrap does not use jQuery and comes with a bunch of small js files that bring you the functionality of what bootstrap.js would give you - check out node_modules\reactstrap\lib.

2.) Their website says that you might have to install popper for certain features - but all the components I tried so far seem to work without.

3.) If you still need jQuery/Popper, you can npm install and require/import inside your JSX files (as I did not need it so far, I am not sure if there are issues with Gatsby)

Bug You can clone and gatsby develop my repository (the images I used are missing - just replace them with http://via.placeholder.com/256x180). The modal and everything else Bootstrap is working just fine. But something goes wrong when I try to build the static page with gatsby build . I think it might be that I am importing bootstrap.min.css from the node_modules folder - which is probably ignored. I still have to look into that part.

@AAverin
Copy link
Author

AAverin commented Dec 16, 2017

Thanks for the answers
I needed to release my website, so I just put all scripts locally for now.
Will try again with reactstrap later

@AAverin AAverin closed this as completed Dec 16, 2017
@AAverin AAverin reopened this Dec 16, 2017
@AAverin AAverin closed this as completed Dec 16, 2017
@mpolinowski
Copy link

Ok it's more a personal project then.

But I updated the build - Gatsby is now running with Bootstrap 4 and served by Express.js. Everything is looking fine to me.

Gatsby ❤️ Bootstrap

@fk fk added the type: question or discussion Issue discussing or asking a question about Gatsby label Feb 14, 2018
@eysi09
Copy link

eysi09 commented Feb 28, 2018

This is still an issue though. The crossorigin attribute is missing from the build product. I have a similar issue where I have a 3rd party library with an integrity attribute and therefore I need to set crossorigin="anonymous".

Since the crossorigin attribute is missing after I build the app it breaks in production.

@borekb
Copy link
Contributor

borekb commented Mar 10, 2018

Agree that there should be a quick example of how to add jQuery and Bootstrap from CDN if one doesn't want to convert the current site to something like React-Bootstrap or reactstrap. While these options might be more "proper", there is nothing that wrong with doing it the old way and I'm not sure how to best do it (currently, I use an ugly workaround with dangerouslySetInnerHTML, too embarrassed to even post it here :) ).

@michaelhiiva
Copy link

michaelhiiva commented Mar 16, 2018

@eysi09 Agreed. @borekb there is actually an easier way to do this, but the documentation on crossOrigin attribute is not there even though it should be. I had the same issue with getting the crossorigin attribute to display; crossorigin just disappeared every time I included it.

The issue is I believe is that webpack uses case sensitive crossOrigin attribute not crossorigin causes the problem; look into webpack - output.crossOriginLoading for more details. Also, I did not really want to compile bootstrap myself and run a sass compiler.

The source for Gatsby's html.js has a few good examples where crossOrigin is used instead of crossorigin and does not fail.

<html {...this.props.htmlAttributes}>
        <head>
          <link
            rel="preload"
            href="/static/ftn45-webfont.c2439033.woff2"
            as="font"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/static/spectral-latin-400.d6a7b14a.woff2"
            as="font"
            crossOrigin="anonymous"
          />

Solution

  • Use the camelCase crossOrigin whenever there is a crossorigin attribute required in source.

Suggestions

Webpack Issue Refs

Screenshot - Gastby.org with crossorigin attribute

gatsbybootstrap-crossorigin github org and source issue 3182-02

Screenshot - Localhost:8000 with crossorigin attribute and sourcefile html.js using crossOrigin

gatsbybootstrap-crossorigin localhost and source issue 3182

@m-allanson
Copy link
Contributor

Thanks for the detailed writeup @EarthSchlange! Would love any PRs adding docs about crossOrigin.

@michaelhiiva
Copy link

michaelhiiva commented Mar 16, 2018

@m-allanson I don't mind doing a write-up, documenting the crossOrigin attribute and a PR.

@KyleAMathews
Copy link
Contributor

Hey folks, there seems to be a bit of confusion here — cross origin has nothing to do particularly with Gatsby. It's needed whenever you reference resources from other domains. See the MDN docs https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Why adding crossorigin isn't working is that React requires all HTML properties to use camel case so crossOrigin. So this has nothing to do with webpack either.

Thanks for the PR @EarthSchlange! #4578 We always appreciate when people pitch in to help make Gatsby better for everyone.

@m-allanson
Copy link
Contributor

Oh yeah, my bad. @EarthSchlange apologies for leading you astray!

@michaelhiiva
Copy link

@m-allanson I learnt something, so it is all good. What @KyleAMathews is good to know in general for working with ReactJS.

@borekb
Copy link
Contributor

borekb commented Mar 27, 2018

If this helps someone, this is how we currently use Bootstrap v3 on our site. Note that we didn't want to re-implement into something like React-Bootstrap which uses a different syntax for components.

The project is in TypeScript and the example demonstrates Modal and Popover components, the later of which requires custom JS initialization via $('[data-toggle="popover"]').popover().

import * as React from 'react';
import * as loadScript from 'simple-load-script';
import 'babel-polyfill'; // must be imported for async/await to work, see e.g. https://github.com/gatsbyjs/gatsby/pull/3369#issuecomment-354599985

// styles are easy
import '../../node_modules/bootstrap/less/bootstrap.less';

class IndexPage extends React.Component {

  // componentDidMount is the right place
  async componentDidMount() {
    
    // load the two JS libraries into `body`
    await loadScript('https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', { inBody: true });
    await loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', { inBody: true });
    
    // init popover
    $(() => {
      $('[data-toggle="popover"]').popover();
    });
    
  }

  render() {
    return (
      // standard Bootstrap markup
      <div>
        <div>
          <p>See <a href='' data-toggle='modal' data-target='#full-details'>full details</a>.</p>
        </div>
        <div id='full-details' className='modal fade' tabIndex={-1} role='dialog'>
          <div className='modal-dialog' role='document'>
            <div className='modal-content'>
              <div className='modal-header'>
                <h4 className='modal-title'>Title</h4>
              </div>
              <div className='modal-body'>
                <p>Modal body with
                    <a
                    className='popover-link'
                    data-toggle='popover'
                    data-placement='bottom'
                    data-trigger='focus'
                    data-content='Popover content'
                    data-html='true'
                    tabIndex={0}
                    role='button'
                  >popover</a>
                </p>
              </div>
              <div className='modal-footer'>
                <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default IndexPage;

What I didn't manage to work is installing jQuery & Bootstrap as dependencies and importing them – some internal things in Bootstrap JS couldn't find $.fn and things like that even though I added webpack.ProvidePlugin (some examples on how to do it here or here) into custom Gatsby config.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests

9 participants