Codesandbox-client: Issue with amcharts4

[RaedsLab]

🐛 bug report

Description of the problem

I'm trying to use "@amcharts/amcharts4": "^4.0.0-beta.42" and I get an error /node_modules/@amcharts/amcharts4/.internal/core/export/Export.js: Unexpected token (2260:49) as soon as I import it.

How has this issue affected you? What are you trying to accomplish?

Link to sandbox: link (optional)

Your Environment

| Software | Name/Version|
| ---------------- | ---------- |
| Сodesandbox | https://codesandbox.io/s/xrp42n3nxw
| Browser | Chrome
| Operating System | Win10

[RaedsLab]

Any update on this ?

[CompuIves]

Heyo! I'm seeing errors from Babel that it can't parse the import() statements of the library. I think it'd be better to not have async import() statements as a dependency, as this is not widely supported syntax and is not supported by all bundlers.

CodeSandbox does support import() statements, but it doesn't assume that node dependencies can have them, that's why it's throwing on a syntax error.

The fix would be to open a PR to amcharts to remove the import() statements and make them static imports, that will make the dependency work with CodeSandbox and with other bundlers 😄.

[RaedsLab]

I have opened an issue there, I really hope to see this resolved.

[Pauan]

@CompuIves I am speaking on behalf of amCharts.

I understand you may not wish to support import() right away, and that's fine, but I would like to share our perspective on it.

The import() expression is natively supported by Chrome and Opera, and it's also supported by Webpack, Rollup, and Parcel (which are the most common bundlers). It is a stage 3 web standard which is widely supported.

If the issue is solely with parsing the syntax, you can use the syntax-dynamic-import plugin.

We are using import() because it is the only standard way to dynamically load ES6 files, which is necessary for amCharts, because the dynamically loaded features are rarely used and they take up 2.93 MB, so it's not acceptable for us to make them static dependencies.

There is nothing wrong with our usage of import(), and it is necessary for us, therefore we will not be accepting any PRs which remove import() from amCharts.

[CompuIves]

Hmmm yes I agree. I first thought that this was the browser throwing an error but now realized that we transpile the module with Babel because it's an ES module. I added the syntax plugin, let's see if it works!

[RaedsLab]

I'm not sure this worked, check the project in the original issue.

https://codesandbox.io/s/xrp42n3nxw

[CompuIves]

Hmm, what error do you get? For me it works here:

It could be because of service workers, does it work for you in incognito tab?

[Pauan]

@CompuIves It didn't work for me at first, but now it's working. Seems like it was just a stale cache issue.

Thanks for fixing this!