Dynamic import via cdn url - exports is not defined

[arvindanta]

Hi Team,
Am trying to dynamically import locale modules via the cdn url.

await import(
https://cdn.jsdelivr.net/npm/date-fns/locale/${locale}/index.js
)

Am getting exports is not defined error.

Can you please provide a way to import locale modules dynamically in the browser via dynamic import.?

[MartinKolarik]

I think you want https://cdn.jsdelivr.net/npm/date-fns/esm/locale/${locate}/index.js ?

[arvindanta]

Am trying to use await import( `https://cdn.jsdelivr.net/npm/date-fns/esm/locale/${locale}/index.js` ).default; .

  Webpack is throwing error that module is not found - `https://cdn.jsdelivr.net/npm/date-fns/esm/locale`

[fturmel]

@arvindanta You were almost there.

Here are two ways to load esm locales at runtime from that specific CDN:

const frCA = (await import(`https://cdn.jsdelivr.net/npm/date-fns/esm/locale/fr-CA/index.js`)).default;
console.log(frCA.code); // fr-CA

const { default: enCA } = await import(`https://cdn.jsdelivr.net/npm/date-fns/esm/locale/en-CA/index.js`);
console.log(enCA.code); // en-CA

[arvindanta]

@fturmel Thanks.
I am getting an issue when using the above cdn dynamic import with webpack.
Webpack is throwing error that module is not found - https://cdn.jsdelivr.net/npm/date-fns/esm/locale

[fturmel]

If you can re-create a small demo of your issue somewhere (with the webpack configs) so that I can reproduce it, I'll have a look.

[fturmel]

Also, there are no official CDN for date-fns v2 at the moment as far as I know. Skypack, JSDelivr, etc are all just pulling the code from npm automatically. I don't actually know for certain that they are in usable shape for prod, but we can find out.

[arvindanta]

@fturmel Do you know if there is a way where I can pull the locale modules as json files instead of js files ?.
It will make it easier to do a dynamic fetch from cdn file instead of dynamic import (breaking via webpack and in simple HTML apps)

[fturmel]

Locales in date-fns are complex objects with functions, not just data files. There might be a way to serialize/deserialize them, but I think you're headed the wrong way with this line of thinking.

Have you tried inlining webpack directives using magic comments?
https://webpack.js.org/api/module-methods/#magic-comments

import(/* webpackIgnore: true */ 'ignored-module.js');

[arvindanta]

I tried the webpackIgnore: true. The issue I face is we are building a component library and we expose the library that can be used via a dependency or via the cdn.

When the library is used as a dependency the dynamic import of this date-fns works but not via cdn.

If I use dynamic import via cdn , the webpack is throwing error even with the above magic comments.

Infact even the app consuming my library is throwing the error that
Webpack is throwing error that module is not found - `https://cdn.jsdelivr.net/npm/date-fns/esm/locale

[arvindanta]

The issue is solved now. During build, webpack magic comments were getting stripped out. Now found a way to solve that.

[fturmel]

Great! For the benefit of the community, would you mind sharing what was stripping the magic comments out and how you solved it?

[arvindanta]

I was using a lib called stencil and it was stripping the comments out during a build process for a particular bundle. I used a different bundle which had the webpack magic comments and hence webpack didnt complain.

[arvindanta]

@fturmel the dynamic import using https://cdn.jsdelivr.net/npm/date-fns/esm/locale/ is working. But as you had mentioned there is no official cdn for date-fns. Is there a way to find out if the ones in the cdn are good to use ?

[arvindanta]

@fturmel Is there a way to use dynamic imports of node_modules in browser ?

I tried loading from the cdn dynamically via dynamic import . But this is leading to close to 9-10 requests in the browsers.

Instead when I install the date-fns locally and bundle it and use dynamic import of the node_module like await import(date-fns/locale/${lang}.js). It works well in apps that use module bundlers.

When I try to use the same in the browser, browser is unable to resolve date-fns

Am kinda stuck between using cdn / npm module for dynamic import.

In general, what is the best practice followed in the ecosystem?. Any thoughts on that.