imports are ignored

[langert]

imports are ignored

[Lyrkan]

For my understanding: but should finding the right spliited files not be handled by the runtime.js ?

Not necessarily:

• For static imports, like the one you're doing here, required chunks are supposed to be added to your page using <script> tags (the encore_entry_script_tags does that by reading the entrypoints.json file). The runtime.js file alone does not know anything about your files/chunks, it's mainly generic code that handles chunks registration/loading and should very rarely change between deployments.
• For dynamic imports (import(module).then(...)) it will indeed retrieve the required chunks automatically (since that's kind of the point of dynamic imports). In this case it's the chunk doing the import that will call a function from the runtime telling it something along the lines of "Hey, I need a chunk called [name], can you load it for me (if not already done before)?".

[weaverryan]

It might just be moved. import statements are meant to be at the TOP of the file. If you mix them in the middle, they may be moved to the top (iirc, npm definitely does this when executing and I assume webpack moves when packaging as well). Also, Webpack does a lot of rewriting your code, especially with the imports. So, it may have moved that code and made it look quite a bit different, but it should be there... somewhere :).

[langert]

@weaverryan ok, but why breaks an import the whole script?
the console.log() before and after the import doe not appear in the console, when importing the lib between. It seems that everything is broken when importing any(node_modules?) lib, but there is no error on building

this is working => logs 'test 1' and logs 'test 2'

console.log('test before'); import tester from './js/tester'; console.log('test after');

this not => no log 'test1' and no log 'test 2'

console.log('test 1'); import { startStimulusApp } from "@symfony/stimulus-bridge"; console.log('test 2');

[weaverryan]

That I don't know. I'm not aware of a time when an import would break something in Webpack without showing some sort of error.

[langert]

this is exactly why I can not fix the problem - no error on build or watch, but a broken script :-(
I am not to ddep into how all the modules are glued together... but might this depend on any babel loader specials?

[weaverryan]

I don’t know - it’s really bizarre. I’d probably start creating some syntax errors and even tweaking removing code inside that imported module in node_modules just to see if that can help figure out what’s going on.

[Lyrkan]

@langert Could you provide some code so we can try to reproduce the issue? Or at least the content of your webpack.config.js and the generated files?

Some leads though:

• In the last example of your initial post it seems that you are actually calling the init() method, which is not the case for startStimulusApp() before. It is the init() call that is present between your two console.log(), not the import, so it makes sense that there is no similar thing for startStimulusApp().
• If you enabled splitEntryChunks() the code may be splitted into multiple files, did you include all of them into your page? Ideally you'd have to read the entrypoints.json file to know which ones should be included for each entrypoint.

[langert]

@Lyrkan yuo made my day! disabled splitEntryChunks() and everything works as expected.

For my understanding: but should finding the right spliited files not be handled by the runtime.js ? I never used webpack encore in a non symfony project without encore_entry_script_tags before, so never payed attention on this.

[weaverryan]

Nice work @Lyrkan!

The encore_entry_script_tags() handles figuring out how the files were split and rendering all of the necessary script tags on the page. The runtime.js is aware, I believe, of where all of the different code should live, but if you're missing a script tag for one of the split files, it seems that the code just doesn't run.