Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gatsby with bootstrap and jquery

See original GitHub issue

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 <body>,

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.

How can I make gatsby keep crossorigin?

Issue Analytics

State:
Created 6 years ago
Comments:17 (6 by maintainers)

Top GitHub Comments

6reactions

borekbcommented, 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.

3reactions

KyleAMathewscommented, Mar 17, 2018

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! https://github.com/gatsbyjs/gatsby/pull/4578 We always appreciate when people pitch in to help make Gatsby better for everyone.