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

Question

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

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>
    );
  }
}

You didn't find any other react based component or you must use jquery? — Dennis Vash, Jul 28 '19 at 15:53
Well, I can only advise not to do that, you should refer to docs: https://reactjs.org/docs/integrating-with-other-libraries.html, and https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs, good luck. — Dennis Vash, Jul 28 '19 at 16:27

score 1 · Answer 1 · answered Jul 28 '19 at 17:50

1

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.

answered Jul 28 '19 at 17:50

Jimmay

582
5
10

Thanks - I got it to work within CodeSandbox following your instruction to remove that jQuery import. I then exported the CodeSandbox to zip, ran npm install, and then npm start, and I received the following error: TypeError: jquery__WEBPACK_IMPORTED_MODULE_7___default(...)(...).DataTable is not a function. I wonder why this code behaves differently when you run it from CodeSandbox versus locally – Chris Jul 28 '19 at 20:52
Yes, unfortunately I can’’t be too certain about that either. The error itself reads as if your Datatables script isn’t being loaded, or if it is, that it’s not occurring in the correct order. I haven’t played with Create React App in quite a long time, so I’d be grasping at straws to try to help you as-is. Do you have a public repo of this? I could clone that and give it a whirl – Jimmay Jul 29 '19 at 00:53
Yep - I just created a public repo for this specific question here: https://github.com/ChrisCruze/create-react-app-cdn – Chris Aug 11 '19 at 19:44

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

1 Answers1