Ionic core loads assets by cdn.jsdelivr.net

alimaster · July 21, 2020, 6:12am

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.

mirkonasato · July 21, 2020, 9:38am

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?

alimaster · July 21, 2020, 11:26am

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.

mirkonasato · July 21, 2020, 1:36pm

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.

alimaster · July 22, 2020, 6:15am

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

mirkonasato · July 22, 2020, 10:19am

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?

alimaster · July 22, 2020, 10:40am

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.

alimaster · July 22, 2020, 10:42am

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.

mirkonasato · July 22, 2020, 11:31am

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.

mirkonasato · July 22, 2020, 11:34am

See Using Capacitor with Ionic.

alimaster · July 23, 2020, 5:41am

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.

mirkonasato · July 23, 2020, 9:25am

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.

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.

Tommertom · July 23, 2020, 10:17am

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 Ionic Framework Packages: CDN, Angular, Vue, and React

Try with the official stuff?

Local install:

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

alimaster · July 25, 2020, 5:31am

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

alimaster · July 26, 2020, 10:20am

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:

github.com

ionic-team/ionic-framework/blob/bfddb170659224d0f826762744dfe44a85813d36/core/scripts/cdn-loader.js


exports.applyPolyfills = function() { return Promise.resolve() };

exports.defineCustomElements = function(_, opts) {
  return new Promise(function(resolve, reject) {
    if (typeof document !== 'undefined') {
      opts = opts || {};
      var mod = document.createElement('script');
      mod.setAttribute('type', 'module');
      mod['data-opts'] = opts;
      mod.src = '__CDN_LOADER_URL__/dist/ionic/ionic.esm.js';

      var legacy = document.createElement('script');
      legacy.setAttribute('nomodule', '');
      legacy['data-opts'] = opts;
      legacy.src = '__CDN_LOADER_URL__/dist/ionic/ionic.js';

      mod.onload = resolve;
      mod.onerror = reject;

This file has been truncated. show original

rapropos · July 26, 2020, 5:53pm

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.

alimaster · July 27, 2020, 7:29am

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

See this image:

mirkonasato · July 27, 2020, 9:22am

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.

alimaster · July 27, 2020, 11:41am

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?

mirkonasato · July 27, 2020, 2:22pm

I don’t know. You could check the Github history to find out when that code was added and what’s the commit message, but I’m not sure that would help you find out why it’s being called in your project.