CODEWITHSUNDEEP
reactjsdatatablescreate-react-appcdn
Chris
Chris

Reputation: 5804

How to import CDN dependency into create-react-app set up?

I'm trying to utilize create-react-app to create a DataTables table, and I want to load the dependencies in via CDN.

I've created this table successfully with simple html/javascript (see below, codepen here)

<html>
<head>
    <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet'>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
    <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'>
    </script>
</head>
<body>
    <table class="display" id="example" style="width:100%"></table>
    <script>
           $("#example").DataTable({
     data: [
       {
         first_name: "Tiger",
         last_name: "Nixon",
         position: "System Architect"
       },
       {
         first_name: "Garrett",
         last_name: "Winters",
         position: "Accountant"
       }
     ],
     columns: [
       { data: "first_name", title: "first" },
       { data: "position", title: "secon" }
     ]
    });

    </script>
</body>
</html>

I'm trying to produce the same result with create-react-app.

I've tried the following and also replicated within this codesandbox here

Added the following dependencies to public/index.html

  <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet' />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>

Added the three dependencies to the external resources in codesandbox

Added the three dependencies to the external resources

Below is the component where DataTables is suppose to render

class App extends Component {
  componentDidMount() {
    $("#example").DataTable({
      data: [
        {
          first_name: "Tiger",
          last_name: "Nixon",
          position: "System Architect"
        },
        {
          first_name: "Garrett",
          last_name: "Winters",
          position: "Accountant"
        }
      ],
      columns: [
        { data: "first_name", title: "first" },
        { data: "position", title: "secon" }
      ]
    });
  }
  render() {
    return (
      <div>
        <table id="example" />
      </div>
    );
  }
}

Upvotes: 1

Views: 1964

Answers (1)

Jimmay
Jimmay

Reputation: 722

In your code sandbox, you’ve imported jQuery again, even though it’s already there thanks to your CDN links. If you remove that import, it appears to work now.

You might have to adjust some eslint rules to tell CRA that you’re using jQuery, but that should solve your problem.

Upvotes: 1

Related Questions