AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.23k stars 782 forks source link

Pagination dropdown not working Create React App #1497

Open rulgf opened 7 years ago

rulgf commented 7 years ago

I'm having problem trying to make de pagination dropdown not working. My problem is similar to #338. I tried to import the bootstrap.js file but I'm having trouble with jquery import:

Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript

How can i achieve the dropdown to work in Create React App

versions:

"react": "^15.6.1",
"react-bootstrap-table": "^3.4.6",
AllenFang commented 7 years ago

@rulgf after v3.0.0, you dont need the jquery and bootstrap.js anymore. do you have repo for me to reproduce it? thanks

maotora commented 7 years ago

Hi @rulgf ,

Umm.. this is what I did to escape the issue.

<!DOCTYPE html>
<html>
  <head>
    <title>Mijengo</title>
    <link rel="stylesheet" href="../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"/>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./styles/styles.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="./app.js" data-container="#app"></script>
    <script>
        const jQuery = require('jquery')
      if (process.env.BROWSER_SYNC_CLIENT_URL) {
        const current = document.currentScript;
        const script = document.createElement('script');
        script.src = process.env.BROWSER_SYNC_CLIENT_URL;
        script.async = true;
        current.parentNode.insertBefore(script, current);
      }
    </script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Note the require('jquery') and the variable name before sourcing bootstrap.js.