Cant enable autoCodeSplitting | TanStack | Page 1

lilac harness Oct 26, 2024, 1:17 AM

#

Hello! I just found the autoCodeSplitting function, i tried enabling it and im getting
[router-code-splitter-plugin] Unexpected splitNode type ☝️: VariableDeclarator
I tried updating to:

 "@tanstack/router-generator": "1.74.2",
 "@tanstack/router-plugin": "^1.76.0",```
and my `routeTree.gen.ts` was slightly changed, but its still not working, any suggestion?

cunning acorn Oct 26, 2024, 4:44 AM

#

can you please provide a minimal complete example that fails?

lilac harness Oct 26, 2024, 9:44 PM

#

Seems to be happening if you use an arrow function declared in a const instead of a regular funcition or an arrow function inline.

Steps to reproduce:

Go to https://tanstack.com/router/latest/docs/framework/react/examples/quickstart-file-based
Modify vite.config.js to add autoCodeSplitting: true
Go to about.tsx
Replace the AboutComponent for:

const AboutComponent = () => {
  return <div>hello</div>;
};

Run npm run build and you get

error during build:
[router-code-splitter-plugin] Unexpected splitNode type ☝️: VariableDeclarator
file: /home/projects/gqairqnavq.github/src/routes/about.tsx?tsr-split
    at eval (file:///home/projects/gqairqnavq.github/node_modules/@tanstack/router-plugin/dist/esm/core/code-splitter/compilers.js:316:21)
    at enter (file:///home/projects/gqairqnavq.github/node_modules/@tanstack/router-plugin/dist/esm/core/code-splitter/compilers.js:240:24)
    at NodePath._call (/home/projects/gqairqnavq.github/node_modules/@babel/traverse/lib/path/context.js:49:20)
    at NodePath.call (/home/projects/gqairqnavq.github/node_modules/@babel/traverse/lib/path/context.js:39:18)
    at NodePath.visit (/home/projects/gqairqnavq.github/node_modules/@babel/traverse/lib/path/context.js:88:31)
    at TraversalContext.visitQueue (/home/projects/gqairqnavq.github/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (/home/projects/gqairqnavq.github/node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (/home/projects/gqairqnavq.github/node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (/home/projects/gqairqnavq.github/node_modules/@babel/traverse/lib/traverse-node.js:22:17)

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.