[Solved] Splitting of Vue components into multiple chunks triggers CSP

💻 Development app dev
1

@ChristophWurst, I found your blog post regarding Vue vs CSP under NC. As I am just working on the cookbook app, stumbled upon your post.
To be precise, we are currently building a single file vue.js from the sources. As this grows with each dependency and all new components/functionalities of the app, we are far beyond the suggested max size for a chunk (suggestions of webpack builder). As Vue allows for dynamic loading of dependencies, I wanted to give it a try.

The following change for example sources the import of the Multiselect component out. From the webpack perspective, this works well and files in js are generated with the individual chunks.

diff --git a/src/components/EditMultiselect.vue b/src/components/EditMultiselect.vue
index 9933cab..e591be4 100644
--- a/src/components/EditMultiselect.vue
+++ b/src/components/EditMultiselect.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+Multiselect = import ('@nextcloud/vue/dist/Components/Multiselect')
 export default {
     name: "EditMultiselect",
     components: {

The problem is now in the browser the CSP. Although, we have a setting in the main.js start script to set the bounce, the delayed loading of the chunks is prohibited. I understood your post that the webpack was able to load additionally needed chunks later if the setting for __webpack_nonce__ was set accordingly.

Do you know if using chunks is possible in general? Do you know of a concrete app that had it managed to compare the settings? Or do you maybe see the issue directly?

2

Hi,

that diff won’t give you async loading (aka chunks). It only changes they way you import the variable.

See https://github.com/nextcloud/mail/blob/72c4a44b522bccdf7c6c96102fe7fc7b175a6b82/src/router.js#L5-L6 for async imports. Those are the type of imports that allow webpack bundle splitting.

3

Well, I cannot confirm this. I added a BundleAnalyzerPlugin and using the named patch, webpack split off the Multiselect in a separate chunk (together with a set of other things). This of course only worked as it was the only occurrence of Multiselect. Apart from the BundleAnalyzer I saw a generated set of files js/1.js and similar generated by the run. So I assume chunks were generated.

Nevertheless, the problem is that the app is no longer loading correctly. The main entry point (vue.js) is loaded but the async loading of additional parts is not triggered/successfully loaded. The last time I looked I thought I saw a message related to CSP, now I cannot reproduce the CSP stuff anymore. I might well oversee the obvious but it seems not to work as expected.

I will have a look after Christmas once more but if you had a hint/tip, I would be gladful.

4

Check for any errors and then consult the webpack docs and similar.

5

I think we got things running. It was a combination of settings that were wrong. I restarted by mirroring the settings in the mail app and succeeded eventually.
Thank you for the hint to the existing and running mail app, @ChristophWurst!

1 Like