dynamic imports give a 404

jlmakes / karma-rollup-preprocessor

Karma preprocessor to bundle ES modules using Rollup.

Other

75 stars 32 forks source link

dynamic imports give a 404 #48

Open LarsDenBakker opened 5 years ago

LarsDenBakker commented 5 years ago

When writing a simple test with the recommended config, I get a 404 on dynamic imports. Likely the actual files get moved after compiling, but the dynamic chunks are not actually moved?

Is this a known issue with rollup and karma? Is there some sample project to look at?

jlmakes commented 5 years ago

I'm not sure this is within the purview of the preprocessor. One idea is that the files are not declared in the Karma config as included: true.

Do you mind putting together a small repo demonstrating the problem?

LarsDenBakker commented 5 years ago

@jlmakes thanks for your swift response.

I've set up a reproduction here: https://github.com/LarsDenBakker/karma-rollup-preprocessor-issues

Run:

npm install
npm run test:dynamic-import
optionally, debug the code at: http://localhost:9876/debug.html

You will see the dynamic import fail.

Adding them to the test config file will not work, as these files are generated by rollup itself when code splitting dynamic imports. Maybe this is out of scope for a preprocessor, but dynamic imports it becoming a very common code pattern. I expect it will be used more and more often.

Happy to help out where possible.

jlmakes commented 5 years ago

Thanks for the reproduction, can confirm npm run test:dynamic-import errors:

TypeError: Failed to fetch dynamically imported module: test-dynamic-import/bar-aed5ea93.js

I assumed Karma copied test files to a temp directory before serving them, and the dynamically imported files would be missing — but upon investigating, there only seems to be encoded/binary files in there.

I'm not sure how to proceed, but I'm suspicious this is more on the Karma side of things.

isidrok commented 5 years ago

Hi, its pretty possible that happens because calling bundle.generate creates several chunks but only the first one is returned as processed, which is the test file itself since they are ordered, so I see two options here:

If there is a way in Karma to output several files from inside a preprocessor just output all chunks.
If there isnt use the inlineDynamicImports rollup option.
Alternatively write all chunks to a temp folder or store them in memory and register a middleware in Karma to serve those files. This seems to be what the webpack preprocessor does (https://github.com/webpack-contrib/karma-webpack/blob/master/src/karma-webpack.js) but I think the second option is easier and should accomplish the same.

Cant confirm ATM though.