Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ESM.sh amcharts5 lib version is broken #1564

Closed
fruitbang opened this issue Jun 10, 2024 · 7 comments
Closed

ESM.sh amcharts5 lib version is broken #1564

fruitbang opened this issue Jun 10, 2024 · 7 comments

Comments

@fruitbang
Copy link

fruitbang commented Jun 10, 2024

Hello, I encountered the following problem.
The library does not work as expected if you use the version from cdn:
"https://esm.sh/@amcharts/amcharts5@5.9.11"

example:
https://codepen.io/fruitbang/pen/YzbxoYL

So, cuz, i haven't opportunity to use the bundler on my project, I have to use cdn, but in the documentation of amharts, I found a link to cdn, where the umd iife module is stored. I would like to use the modern format: esm modules, but I encountered such a problem.

The issue of library delivery is also raised in this discussion:
"#82"

@Pauan
Copy link
Collaborator

Pauan commented Jun 13, 2024

I believe this is a bug with esm.sh, perhaps they don't properly handle libraries that have multiple entry points.

The reason we don't provide a CDN for ES6 modules is because amCharts uses npm modules, so it has to use a bundler in order to work in the browser.

esm.sh has its own bundling code, which doesn't seem to be working properly with amCharts. I suggest filing a bug with them.

@fruitbang
Copy link
Author

fruitbang commented Jun 13, 2024

Perhaps it is possible to compile not only the umd version of the library, but also the es6 version and distribute it from your CDN, so that it would be possible to use the modern syntax for importing a module into .js/.ts files, and not strange constructions with the <script> tag?

@fruitbang
Copy link
Author

I believe this is a bug with esm.sh, perhaps they don't properly handle libraries that have multiple entry points.

not only esm compiles the code into something non-working, but jsdelivr works the same way. Maybe there is some way to make those compilers (as far as I understand, usually webpack), which automatically compile each library in cdn-repos, work properly.

@Pauan
Copy link
Collaborator

Pauan commented Jun 14, 2024

As I explained, we cannot provide ES6 modules in the CDN, because the browser does not support npm modules.

You can use ES6 modules with amCharts, but you must use our npm package and then you must use a bundler (such as Webpack).

It is standard best practice to use bundlers, because they significantly improve the performance of your code.

not only esm compiles the code into something non-working, but jsdelivr works the same way. Maybe there is some way to make those compilers (as far as I understand, usually webpack), which automatically compile each library in cdn-repos, work properly.

amCharts works perfectly with every bundler (Webpack, Rollup, Snowpack, Parcel, etc.)

esm.sh uses a custom bundler, which is why amCharts does not work with them. That is why I said that it's a bug with esm.sh

@fruitbang
Copy link
Author

As I explained, we cannot provide ES6 modules in the CDN, because the browser does not support npm modules.

Pardon, maybe I don't understand something, but the browser supports ESM-modules.

https://caniuse.com/?search=ESM
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

@Pauan
Copy link
Collaborator

Pauan commented Jun 15, 2024

Pardon, maybe I don't understand something, but the browser supports ESM-modules.

The browser does not support npm modules:

https://www.tutorialsteacher.com/nodejs/what-is-node-package-manager

https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/

https://medium.com/swlh/what-is-npm-a-simple-english-guide-to-truly-understanding-the-node-package-manager-41e82f6c5515

Almost all JS code (including amCharts) uses npm modules, and therefore cannot be used directly in the browser.

That is why it is necessary to use bundlers. The bundler changes the npm modules into a form that the browser can understand.

Copy link

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants