'use client' #1049

Activity

1. rschristian commented on Jun 19, 2023

   

   rschristian

   on Jun 19, 2023

   Last edited by rschristian

   Collaborator

   More actions

   Does 'use client' still end up in your bundle?

   Edit: It does not. I'm wondering if this is something Microbundle should support though, as directives are per-file, so if you were to say bundle a bunch of components with Microbundle, all would be affected by that directive. I'm not sure what the expected behavior here would be.
2. developit commented on Jun 27, 2023

   

   developit

   on Jun 27, 2023

   Last edited by developit

   Owner

   More actions

   The only way I can think of to do this would be to string-replace "use client" to something Terser will never minify/inline/fold, then string-replace it back after minification. There are very few replacements that would work for this, but an empty destructured variable declaration is one of them (Terser simply preserves it as-is).

   // replace directive with a side effecting statement to keep it in-place during minification:
   code = code.replace(/(\{[\n\s]*)(['"])use client\2([;\s])/g, `$1var{}=_USE_CLIENT_$3`);
   
   // then minify:
   let minified = (await terser.minify(code)).code;
   
   // then replace the statement back:
   minified = minified.replace(/(\{[\n\s]*)var\s*{\s*}\s*=\s*_USE_CLIENT_([;\s])/g, `$1"use client"$2`);
3. clementroche commented on Aug 2, 2023

   

   clementroche

   on Aug 2, 2023

   Last edited by clementroche

   Author

   More actions

   any solution planned @developit ?

   this might become a real issue once maintainer switch to Next.js app folder
   see next.js notice https://nextjs.org/docs/getting-started/react-essentials#third-party-packages
4. ForsakenHarmony commented on Aug 3, 2023

   

   ForsakenHarmony

   on Aug 3, 2023

   Last edited by ForsakenHarmony

   Collaborator

   More actions

   terser also has compress.directives which could be set to false

   @clementroche does it help to add a mangle.json file with the following content?

   {
     "minify": {
       "compress": {
         "directives": false,
       }
     }
   }

   We might also need rollup-plugin-preserve-directives 🤔

   Also see the rollup issue about the subject: rollup/rollup#4699
5. clementroche commented on Aug 3, 2023

   

   clementroche

   on Aug 3, 2023

   Last edited by clementroche

   Author

   More actions

   Now i realise that the issue comes from rollup itself not directly from microbundle, i'm gonna take a look at the thread you shared, thank you
6. clementroche commented on Aug 7, 2023

   

   clementroche

   on Aug 7, 2023

   Last edited by clementroche

   Author

   More actions

   I tried both solutions @ForsakenHarmony, still have this warning Module level directives cause errors when bundled, 'use client' was ignored.

   pretty sure rollup.config.js is ignored by microbundle, right ?
7. rschristian commented on Aug 7, 2023

   

   rschristian

   on Aug 7, 2023

   Collaborator

   More actions

   pretty sure rollup.config.js is ignored by microbundle, right ?

   Yes, Microbundle's Rollup configuration is not open to configuration. However, you can of course patch Microbundle's config from node_modules to test out various solutions, if you didn't want to clone Microbundle & dev with the test suite.
8. Stan-Stani commented on Aug 22, 2023

   

   Stan-Stani

   on Aug 22, 2023

   Last edited by Stan-Stani

   More actions

   Personally, I would just like a way to silence that error for now.

   Having a thousand lines like this,

   Module level directives cause errors when bundled, 'use client' was ignored.
   Module level directives cause errors when bundled, 'use client' was ignored.       
   Module level directives cause errors when bundled, 'use client' was ignored.
   Module level directives cause errors when bundled, 'use client' was ignored.
   Module level directives cause errors when bundled, 'use client' was ignored.
   Module level directives cause errors when bundled, 'use client' was ignored.
   

   makes it hard to find when there are actual errors that prevent bundling.

   I'm trying to figure out how to directly patch microbundle.js in node_modules, where the config lives, but I think I'm running into issues with yarn caching the files so my edits aren't causing changes :(.
9. gtjamesa commented on Sep 4, 2023

   

   gtjamesa

   on Sep 4, 2023

   More actions

   I'm trying to figure out how to directly patch microbundle.js in node_modules, where the config lives, but I think I'm running into issues with yarn caching the files so my edits aren't causing changes :(.

   You can edit the relevant files then use patch-package to create a patch that you can track in version control. It will be reapplied on install
10. rschristian commented on Sep 4, 2023

    

    rschristian

    on Sep 4, 2023

    Last edited by rschristian

    Collaborator

    More actions

    I'm trying to figure out how to directly patch microbundle.js in node_modules, where the config lives, but I think I'm running into issues with yarn caching the files so my edits aren't causing changes :(.

    Sorry, I didn't see this. Make sure you're editing node_modules/microbundle/dist/cli.js, rather than node_modules/microbundle/dist/microbundle.js. The former is the CLI app, latter is for programmatic usage.

    Yarn v1 has no caching, no idea about v2+ though.