javascriptesmodules

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?

Solution

  • 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.