JS bundling results in failed imports

slim · September 28, 2020, 12:53am

I need advice to debug deploy https://app.netlify.com/sites/music-practice-tools/deploys/5f06133b41ffe500077cd64c

If I enable Netlify processing to bundle JS (using .toml) files imported from browser ES Modules fail

music-practice-tools/music-practice-tools/blob/master/src/js/client.js

import { videoSeekList_data, initVideo } from './widgets/videoseek.js'
import { timer_data } from './widgets/timer.js'
import { metronome_data } from './widgets/metronome.js'
import { randomNote_data, randomNumber_data } from './widgets/random.js'
import { activityList_data } from './widgets/activitylist.js'
import { replaceABCFences, toggleABCSource } from './widgets/abc.js'
import { recorder_data } from './widgets/recorder.js'
import { globalErrorHandler } from './globalerror.js'

// provide access for global scripts - eg in HTML
// @ts-ignore
window.CLIENT = {
  metronome_data,
  randomNote_data,
  randomNumber_data,
  timer_data,
  activityList_data,
  recorder_data,
  videoSeekList_data,
  toggleABCSource,

This file has been truncated. show original

eg

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/abc.js

I assume this is by design and there is no solution - unless you patched my code to change the imports

luke · September 24, 2020, 4:19am

Hi, @slim, I’m not sure I know that the problem is. (I know there is one, I’m just not clear on how to “see” it.)

The deploy linked to is a failed deploy but I’m not clear why it failed. However, you also seem to be asking about the deployed site not working when the javascript is bundled and/or minified.

Would you please help us understand how we see the issue? What URL do I visit and what error I am looking for? Is the error in the devtools console or network tab? Is the error missing functionality on the page and, if so, how do I test?

We are happy to help troubleshoot. Personally, though, I’m not sure where I’m supposed to be looking.

slim · September 24, 2020, 7:50am

Apologies @luke and thanks for persisting! I’m not sure how the failed deploy got linked. Let me get a successful deploy that exhibits the problem and I’ll clarify.

But briefly for now - if the Netlify JS bundle option is used then browser side ES6 “import” statements of specific JS files fail. I assume this is as the individual files have been bundled up and so do not appear in the deployment. Note there is no bundler in my tool chain - I have static JS files with manually entered “import” statements referencing other static JS files at their [expected] deployed URI.

Thanks

slim · September 28, 2020, 7:06am

@luke

Try this deploy with all NETLIFY optimisations enabled (I so love Netlify for keeping all deploys around!!!)

and in browser console or network tab see all this are 404

[HTTP/2 404 Not Found 12ms]

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/timer.js
[HTTP/2 404 Not Found 12ms]

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/metronome.js
[HTTP/2 404 Not Found 222ms]

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/random.js
[HTTP/2 404 Not Found 25ms]

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/activitylist.js
[HTTP/2 404 Not Found 14ms]

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/abc.js
[HTTP/2 404 Not Found 14ms]

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/recorder.js
[HTTP/2 404 Not Found 15ms]

GEThttps://d33wubrfki0l68.cloudfront.net/bundles/globalerror.jshttps://d33wubrfki0l68.cloudfront.net/bundles/widgets/random.js

Here is the code (file is an ES6 module) the browser is executing

github.com

music-practice-tools/music-practice-tools/blob/0229c4c4f7a23232d8a9230d9eed91e8d1941462/src/js/client.js#L1-L8


import { videoSeekList_data, initVideo } from './widgets/videoseek.js'
import { timer_data } from './widgets/timer.js'
import { metronome_data } from './widgets/metronome.js'
import { randomNote_data, randomNumber_data } from './widgets/random.js'
import { activityList_data } from './widgets/activitylist.js'
import { replaceABCFences, toggleABCSource } from './widgets/abc.js'
import { recorder_data } from './widgets/recorder.js'
import { globalErrorHandler } from './globalerror.js'

So I assume the Netlify JS bundler is not smart enough to handled specific ES6 includes. I turned that optimisation off and all is well.

luke · September 28, 2020, 7:06am

Hi, @slim. I do agree with the assessment that the bundler isn’t transforming the import code correctly to use the new bundles and it won’t be possible to use asset optimization with this code.

Thank you for sharing what you discovered.