Ionic core loads assets by cdn.jsdelivr.net

Hi there,

I’m Ali Toki from Iran and we are using the Ionic react version in our PWA’s version of a bank and we have a critical problem with Ionic and here are the problem details. Ionic version:
4.x
5.2.2
Current behavior:
Ionic react loads its assets by using jsdelivr CDN that our application can’t run without the internet. Keep in mind that our clients should have a VPN connection to see the cdn.jsdelivr.net , Now, this bug goes to be a critical problem for us and we don’t know what should we do!!!
Expected behavior:
Ionic react should load all its dependencies locally, not by using CDN.
CDN URL:

https://cdn.jsdelivr.net/npm/@ionic/core@5.2.2/dist/ionic/ionic.esm.js

And also

https://cdn.jsdelivr.net/npm/@ionic/core@5.2.2/dist/ionic/ionic.js

Is there anybody here to help me? I really need your help and I appreciate it.

If I create a new Ionic React project using the Ionic CLI, all dependencies are loaded locally. There are no requests to external servers.

How did you set up your project?

Use ionic/react components and you will see what I see in my network tab to get the ionic.esm.js file by cdn.jsdelivr.net
And also all other assets in @ionic/core will resolve by jsdelivr not locally.

I am using Ionic React components, and everything is loaded locally.

If your project is fetching assets from cdn.jsdelivr.net that’s because you have some code in your project that loads the @ionic/core library from cdn.jsdelivr.net. It’s not a problem with Ionic, it’s a problem with your own code.

Again, if you set up a project following the recommended approach everything will be loaded locally.

1 Like

So, Do you know what is it?

(e.defineCustomElements = function(t, e) {
    return new Promise(function(t, n) {
        if ("undefined" !== typeof document) {
            e = e || {};
            var i = document.createElement("script");
            i.setAttribute("type", "module"),
                (i["data-opts"] = e),
                (i.src = "https://cdn.jsdelivr.net/npm/@ionic/core@5.2.2/dist/ionic/ionic.esm.js");
            var r = document.createElement("script");
            r.setAttribute("nomodule", ""),
                (r["data-opts"] = e),
                (r.src = "https://cdn.jsdelivr.net/npm/@ionic/core@5.2.2/dist/ionic/ionic.js"),
                (i.onload = t),
                (i.onerror = n),
                (r.onload = t),
                (r.onerror = n),
                document.head.appendChild(i),
                document.head.appendChild(r);
        } else t();
    });
});

How am I supposed to know where some bit of code comes from? Do you want help or to play games?

If you want help perhaps you can answer my previous question: “How did you set up your project?” Did you create it with the Ionic CLI, or else how are you including the Ionic libraries?

Sorry @mirkonasato and accept my apologize,

When we started the project, I used the @ionic cli to create the project and everything works well until we wanted to create the production build. And I found the bit of code that fail our build process and that code will automatically import the ionic/core built codes by cdn.jsdelivr not locally.

Do you know how can I integrate the capacitor with our project? because I don’t have the capacitor in my package.json because when I used the ionic cli to create the base, this package doesn’t exist.

I would expect that bit of code to only be used if you choose to load Ionic from the CDN, which is an option but it’s not what happens in a typical setup where npm dependencies are installed locally.

You’re saying the call to the CDN fails your build process? As in, it’s the ionic build command that fails? I can run ionic build while disconnected from the internet and it works fine.

See Using Capacitor with Ionic.

We can not see the cdn.jsdelivr.net without a VPN connection because the jsdelivr banned us(I don’t know why) and our clients can’t download the asset files and I’m using react-script-rewired to change a bit of default create-react-app(the starter config of @ionic/cli) config(to add my custom service-worker config) and my build command is:

$ npx cross-env NODE_ENV=production react-app-rewired build

And also, I used the react-app-rewire-workspaces to load other Lerna packages in the root package.

NOTE:
When I create a starter code base by ionic/cli, everything works as well as desired and build assets is okay but in our project which started 8 months ago, has this problem. and we couldn’t launch our product up to now.

Exactly: a standard Ionic project doesn’t have this problem. So you need to find out what’s different in your project that is causing the problem to occur.

I don’t have a crystal ball, so I cannot guess what’s going on in your code without seeing it. :man_shrugging:

If you can share a project that can be used to reproduce the problem maybe people can have a look. Otherwise there’s not much we can do.

Both links dont work for me - by clicking on them.

I use this for my svelte project


    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

Which I took from the official docs https://ionicframework.com/docs/intro/cdn

Try with the official stuff?

Local install:

<script type="module" src='/assets/libs/@ionic/core/dist/ionic/ionic.js'></script>
etc..

This post was flagged by the community and is temporarily hidden.

I don’t get it by cdn, it’s apprears automaticly and I don’t know why.

Hi, dear @mirkonasato

I found this bit of @ionic/core code that append two script tags which linked to the cdn.jsdelivr.com.

Reference in the project github repository:

As far as I can see, that’s only used internally for when Ionic team pushes new framework releases. I don’t see anywhere it’s incorporated into app builds.

But that code will append two script tags into header tag.

See this image:

Yes, you mentioned that before. It ends up in the @ionic/core package as loader/cdn.js.

We also said before that a standard Ionic project as created with the Ionic CLI never calls that bit of code. So you need to find out what’s different in your project that causes that code to be used.

I never imported the loader/cdn.js or any other related files and I rummaged the whole project codes and I don’t know what’s going on!

May I know when the @ionic/core uses this code into the project? What is that use-case?