Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug?]: (v1.1.0) Unable to inline server functions in components #1816

Open
2 tasks done
peterhirn opened this issue Feb 17, 2025 · 1 comment
Open
2 tasks done

[Bug?]: (v1.1.0) Unable to inline server functions in components #1816

peterhirn opened this issue Feb 17, 2025 · 1 comment
Labels
bug Something isn't working contribution welcome we would appreciate a PR

Comments

@peterhirn
Copy link

peterhirn commented Feb 17, 2025 •
edited
Loading

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Previously we were able to inline server functions directly in components. Since v1.1.0 this is no longer possible and throws a very verbose error (including the full component three times).

Expected behavior 🤔

I'm wondering if this change is deliberate or a bug. If it is deliberate, maybe the error message can be improved.

Steps to reproduce 🕹

import { action, useAction } from "@solidjs/router";
import { isServer } from "solid-js/web";

export default function Home() {
  const myAction = useAction(
    action(async () => {
      "use server";
      console.log(isServer);
    }),
  );

  return (
    <main>
      <button onClick={myAction}>Action</button>
    </main>
  );
}

pnpm build

📦 Compiling ssr router...
vinxi building router ssr in http mode
vite v6.1.0 building SSR bundle for production...
✓ 1 modules transformed.
x Build failed in 63ms

 ERROR  [tanstack-start-directive-vite-plugin]    1 | import { action, useAction } from "@solidjs/router";                                                                                                                  4:06:43 AM
   2 | import { isServer } from "solid-js/web";
>  3 | export default function Home() {
     |                               ^^
>  4 |   const myAction = useAction(action(async () => {
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  5 |     "use server";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  6 |
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  7 |     console.log(isServer);
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  8 |   }));
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  9 |   return <main>
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 10 |       <button onClick={myAction}>Action</button>
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 11 |     </main>;
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 12 | }
     | ^ Server Functions cannot be nested in other blocks or functions
file: /home/peter/Projects/test/solid-start-inline-fn/src/routes/index.tsx?pick=default&pick=$css

      2 | import { isServer } from "solid-js/web";
    >  3 | export default function Home() {
        |                               ^^
    >  4 |   const myAction = useAction(action(async () => {
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >  5 |     "use server";
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >  6 |
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >  7 |     console.log(isServer);
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >  8 |   }));
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >  9 |   return <main>
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    > 10 |       <button onClick={myAction}>Action</button>
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    > 11 |     </main>;
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    > 12 | }
        | ^ Server Functions cannot be nested in other blocks or functions
    file: src/routes/index.tsx?pick=default&pick=$css
    at codeFrameError (node_modules/.pnpm/@tanstack+directive-functions-plugin@1.105.2/node_modules/@tanstack/directive-functions-plugin/dist/esm/compilers.js:326:10)
    at DirectiveLiteral (node_modules/.pnpm/@tanstack+directive-functions-plugin@1.105.2/node_modules/@tanstack/directive-functions-plugin/dist/esm/compilers.js:177:19)
    at NodePath._call (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:49:20)
    at NodePath.call (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:39:18)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:88:31)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (node_modules/.pnpm/@babel+traverse@7.26.9/node_modules/@babel/traverse/lib/path/context.js:94:52)



 ERROR  [tanstack-start-directive-vite-plugin]    1 | import { action, useAction } from "@solidjs/router";                                                                                                                  4:06:43 AM
   2 | import { isServer } from "solid-js/web";
>  3 | export default function Home() {
     |                               ^^
>  4 |   const myAction = useAction(action(async () => {
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  5 |     "use server";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  6 |
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  7 |     console.log(isServer);
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  8 |   }));
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>  9 |   return <main>
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 10 |       <button onClick={myAction}>Action</button>
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 11 |     </main>;
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 12 | }
     | ^ Server Functions cannot be nested in other blocks or functions
file: /home/peter/Projects/test/solid-start-inline-fn/src/routes/index.tsx?pick=default&pick=$css


 ERROR  Exited with code: 1                                                                                                                                                                                                 4:06:43 AM

    at CommandChild.pipedStdoutBuffer (node_modules/.pnpm/dax-sh@0.39.2/node_modules/dax-sh/esm/mod.js:9392:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)



 ERROR  Exited with code: 1                                                                                                                                                                                                 4:06:43 AM

 ELIFECYCLE  Command failed with exit code 1.

Context 🔦

No response

Your environment 🌎


      		
    

      
  





        



            

              
            

        

      


      
    








      

    



      

  
            

    

      
    

    


      

          @peterhirn
peterhirn




            added
      

  bug

  Something isn't working

      

  needs triage


  labels


      Feb 17, 2025

    

  








      

  
      



  

  @atilafassina





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
  Member


      

  


  

    

  





      


        


  
    

      
          
Hi, @peterhirn

yes, that's an unpredicted regression. It's on me and I'm really sorry about that.


The new server-function plugin has much more aggressive treeshaking, this prevents code from leaking to the frontend. Unfortunately, as a consequence of that, it does not perform closure extraction.


As a workaround, you can refactor your code like such:


import { action, useAction } from "@solidjs/router";
import { isServer } from "solid-js/web";

const yourServerAction = action(async () => {
      "use server";
      console.log(isServer);
    }),

export default function Home() {
  const myAction = useAction(yourServerAction);

  return (
    <main>
      <button onClick={myAction}>Action</button>
    </main>
  );
}


And that would work again, plus, even in the old plugin - that would make your code safer, imho, by making it easier for the code-removal preventing it to land in the client-side bundle.




I'm still working on a better DX, either to migrate or to add code-extraction to the plugin.

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
            

    

      
    

    


      

          @atilafassina
atilafassina




            added
      

  contribution welcome

  we would appreciate a PR

    and removed
      

  needs triage


  labels


      Feb 18, 2025

    

  












  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

      

    bug

  Something isn't working
  

    contribution welcome

  we would appreciate a PR








      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          
  

    

      

        
          

            
    

    Development
  




              
    
No branches or pull requests







        
      

    

  


      

    

  
      

  

    

      2 participants
    

    

        
          @peterhirn 
        
          @atilafassina