Bootstrap Dropdown does not work

Hi, I’m Trying to use the Dropdown menu in SiteNavi/Index.jsx and it doesn’t seem to be working.

render() {
    const pathPrefix =
      process.env.NODE_ENV === 'development' ? '' : __PATH_PREFIX__
    const { location, title } = this.props
    return (
      <nav className="navbar navbar-toggleable-md navbar-light bg-faded">
  <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>
  <a className="navbar-brand" href="#">Navbar</a>
  <div className="collapse navbar-collapse" id="navbarNavDropdown">
    <ul className="navbar-nav">
      <li className="nav-item active">
        <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href="#">Features</a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href="#">Pricing</a>
      </li>
      <li className="nav-item dropdown">
        <a className="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a className="dropdown-item" href="#">Action</a>
          <a className="dropdown-item" href="#">Another action</a>
          <a className="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
    )
  }
}

[drmikecrowe]

For those who are still trying to solve this, here’s the solution I used: In gatsby-node.js do:

// https://github.com/gatsbyjs/gatsby/issues/6053#issuecomment-457243520

const webpack = require('webpack')

exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: require.resolve('bootstrap'),
            use: loaders.null()
          },
          {
            test: require.resolve('jquery'),
            use: loaders.null()
          }
        ]
      }
    })
  }
  actions.setWebpackConfig({
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: 'popper.js',
        Bootstrap: 'bootstrap.js'
      })
    ]
  })
}

[wsaborio]

Was really racking my brain over this dropdown for a long time and easiest fix for me ended up being upgrading to the latest Bootstrap beta + including Popper.js in html.js (didn’t go the webpack route) as there’s a new dependency on it specifically for dropdowns.

You can read more here: https://getbootstrap.com/docs/4.0/getting-started/introduction/#js