CODEWITHSUNDEEP
javascriptesmodules
anon
anon

Reputation:

How to import via a URL using ES modules?

I want to import a library like axios directly from a URL and use it.

I don't want to add it as a script which adds axios to the window object (as shown below).

index.html
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./app.js" type="module"></script>
</body>
app.js
console.log(window.axios !== undefined); // true
const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username); // Bret

I want something like this wherein I can import axios directly from a URL.

index.html
<body>
    <script src="./app.js" type="module"></script>
</body>
app.js
import axios from "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js";

console.log(window.axios !== undefined);
const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username);

Obviously this doesn't work because the JavaScript code delivered by the above CDN is not meant to be used with ES modules. Is there a workaround?

Upvotes: 3

Views: 3231

Answers (3)

Shivam
Shivam

Reputation: 1424

You can use Skypack:

import axios from 'https://cdn.skypack.dev/axios';

const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username);

Remove the jsDelivr CDN link.

Upvotes: 3

Raphael Barbosa Rodrigues
Raphael Barbosa Rodrigues

Reputation: 59

You don't need to import axios in app.js because it has already been imported in your html, just remove the import and everything gonna work

    async function fetchData() {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/users/1"
      );
      console.log(data);
    }

fetchData();

Upvotes: 1

KaMui
KaMui

Reputation: 168

JS file provided by CDN(like yours: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js) will not provide an ES6 module export. Download and search "export default", nothing will be found.

If you use npm, you can add axios to your dependencies and use axios by import axios from 'axios'

If you still want to use ES module with CDN, This article may help.

Upvotes: 1

Related Questions