T
TanStack•6mo ago
rare-sapphire

Node Stream error on build.

I am having a build issue when using alias but ONLY on my data routes running server side. I am assuming this is a issue with my app.config and vinxi bundle. This is my setup: tsconfig 
{
    "compilerOptions": {
        /* Base Options: */
        "esModuleInterop": true,
        "skipLibCheck": true,
        "target": "es2022",
        "allowJs": true,
        "resolveJsonModule": true,
        "moduleDetection": "force",
        "isolatedModules": true,

        /* Strictness */
        "strict": true,
        "noUncheckedIndexedAccess": true,
        "checkJs": true,

        /* Bundled projects */
        "lib": ["dom", "dom.iterable", "ES2022"],
        "noEmit": true,
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "jsx": "react-jsx",
        "plugins": [{ "name": "next" }],
        "incremental": true,

        /* Path Aliases */
        "baseUrl": ".",
        "paths": {
            "@/*": ["./*"]
        }
    },
    "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.js"],
    "exclude": ["node_modules"]
}
{
    "compilerOptions": {
        /* Base Options: */
        "esModuleInterop": true,
        "skipLibCheck": true,
        "target": "es2022",
        "allowJs": true,
        "resolveJsonModule": true,
        "moduleDetection": "force",
        "isolatedModules": true,

        /* Strictness */
        "strict": true,
        "noUncheckedIndexedAccess": true,
        "checkJs": true,

        /* Bundled projects */
        "lib": ["dom", "dom.iterable", "ES2022"],
        "noEmit": true,
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "jsx": "react-jsx",
        "plugins": [{ "name": "next" }],
        "incremental": true,

        /* Path Aliases */
        "baseUrl": ".",
        "paths": {
            "@/*": ["./*"]
        }
    },
    "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.js"],
    "exclude": ["node_modules"]
}
13 Replies
extended-salmon
extended-salmon•6mo ago
which errors do you have?
rare-sapphire
rare-sapphireOP•6mo ago
You are so fast haha, im putting them in discord limits the char count 
 import { ReadableStream } from "node:stream/web";
2: import { Readable } from "node:stream";
            ^
3: import { createControlledPromise } from "@tanstack/router-core";
 import { ReadableStream } from "node:stream/web";
2: import { Readable } from "node:stream";
            ^
3: import { createControlledPromise } from "@tanstack/router-core";
__root.tsx 
// Data
import { Api, getSessionData, getCurrentProfile, getCurrentUser } from '@/data'

export const Route = createRootRouteWithContext<{
    authorized: boolean
    queryClient: QueryClient
    profile?: Api.Identity.Profile.CurrentProfile
    user?: Api.Identity.User.CurrentUser
}>()({
    beforeLoad: async ({ context }) => {
        const data = await getSessionData()

        if (!data.access) {
            return {
                ...context,
                authorized: !!data.access,
                user: undefined,
            }
        }

        const profile = await getCurrentProfile()
        const user = await getCurrentUser()

        return {
            ...context,
            authorized: !!data.access && user.data.credentials.role !== 'USER',
            profile: profile.data,
            user: user.data,
        }
    },
    head: () => ({
        ...
    }),
    component: () => {
        return (
           ...
        )
    },
})
// Data
import { Api, getSessionData, getCurrentProfile, getCurrentUser } from '@/data'

export const Route = createRootRouteWithContext<{
    authorized: boolean
    queryClient: QueryClient
    profile?: Api.Identity.Profile.CurrentProfile
    user?: Api.Identity.User.CurrentUser
}>()({
    beforeLoad: async ({ context }) => {
        const data = await getSessionData()

        if (!data.access) {
            return {
                ...context,
                authorized: !!data.access,
                user: undefined,
            }
        }

        const profile = await getCurrentProfile()
        const user = await getCurrentUser()

        return {
            ...context,
            authorized: !!data.access && user.data.credentials.role !== 'USER',
            profile: profile.data,
            user: user.data,
        }
    },
    head: () => ({
        ...
    }),
    component: () => {
        return (
           ...
        )
    },
})
app.config 
import { defineConfig } from '@tanstack/react-start/config'
import tsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    server: {
        preset: 'node-server',
        prerender: {
            routes: ['/', '/login'],
        },
    },
    tsr: {
        appDirectory: 'app',
    },
    vite: {
        plugins: [
            ...[].concat(tailwindcss() as any),
            ...[].concat(
                tsConfigPaths({
                    projects: ['./tsconfig.json'],
                }) as any,
            ),
        ],
        optimizeDeps: {
            esbuildOptions: {
                target: 'es2020',
                define: {
                    global: 'globalThis',
                },
                supported: {
                    bigint: true,
                },
            },
        },
        build: {
            target: ['es2020'],
            commonjsOptions: {
                transformMixedEsModules: true,
            },
        },
        esbuild: { drop: ['console'] },
    },
})
import { defineConfig } from '@tanstack/react-start/config'
import tsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    server: {
        preset: 'node-server',
        prerender: {
            routes: ['/', '/login'],
        },
    },
    tsr: {
        appDirectory: 'app',
    },
    vite: {
        plugins: [
            ...[].concat(tailwindcss() as any),
            ...[].concat(
                tsConfigPaths({
                    projects: ['./tsconfig.json'],
                }) as any,
            ),
        ],
        optimizeDeps: {
            esbuildOptions: {
                target: 'es2020',
                define: {
                    global: 'globalThis',
                },
                supported: {
                    bigint: true,
                },
            },
        },
        build: {
            target: ['es2020'],
            commonjsOptions: {
                transformMixedEsModules: true,
            },
        },
        esbuild: { drop: ['console'] },
    },
})
extended-salmon
extended-salmon•6mo ago
does getSessionData call any server stuff? if yes, it must be wrapped into a server function otherwise it would run on the client as well
rare-sapphire
rare-sapphireOP•6mo ago
export const getSessionData = createServerFn({ method: 'GET' }).handler(async () => {
    const session = await useAppSession()

    return session.data
})
export const getSessionData = createServerFn({ method: 'GET' }).handler(async () => {
    const session = await useAppSession()

    return session.data
})
I do have it wrapped
extended-salmon
extended-salmon•6mo ago
can you paste the full file where that server function is defined? sometimes its caused by some server thing being exported from a file that defines a server funciton
rare-sapphire
rare-sapphireOP•6mo ago
import { createServerFn } from '@tanstack/react-start'

// App Session
import { useAppSession } from '../use-app-session'

export const getSessionData = createServerFn({ method: 'GET' }).handler(async () => {
    const session = await useAppSession()

    return session.data
})



/*=================*/

import { useSession } from '@tanstack/react-start/server'

type SessionUser = {
    access: string
    refresh: string
    refresh_id: string
}

export function useAppSession() {
    return useSession<SessionUser>({
        name: process.env.SESSION_NAME!,
        password: process.env.SESSION_SECRET!,
        cookie: {
            path: '/',
            httpOnly: true,
            secure: process.env.NODE_ENV === 'production',
            sameSite: 'strict',
            maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
        },
    })
}
import { createServerFn } from '@tanstack/react-start'

// App Session
import { useAppSession } from '../use-app-session'

export const getSessionData = createServerFn({ method: 'GET' }).handler(async () => {
    const session = await useAppSession()

    return session.data
})



/*=================*/

import { useSession } from '@tanstack/react-start/server'

type SessionUser = {
    access: string
    refresh: string
    refresh_id: string
}

export function useAppSession() {
    return useSession<SessionUser>({
        name: process.env.SESSION_NAME!,
        password: process.env.SESSION_SECRET!,
        cookie: {
            path: '/',
            httpOnly: true,
            secure: process.env.NODE_ENV === 'production',
            sameSite: 'strict',
            maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
        },
    })
}
If I use the direct path ../../../../whatever/* it builds fine - its only when I alias For example if I import everything like this 
import { Api } from '../../data/api/index'
import { getSessionData } from '../../data/session/get-session-data/get-session-data'
import { getCurrentProfile } from '../../data/query/identity/profile/get-current-profile/get-current-profile.server'
import { getCurrentUser } from '../../data/query/identity/user/get-current-user/get-current-user.server'
import { Api } from '../../data/api/index'
import { getSessionData } from '../../data/session/get-session-data/get-session-data'
import { getCurrentProfile } from '../../data/query/identity/profile/get-current-profile/get-current-profile.server'
import { getCurrentUser } from '../../data/query/identity/user/get-current-user/get-current-user.server'
It builds fine
extended-salmon
extended-salmon•6mo ago
the issue is the export of useAppSession move this into another file to test
rare-sapphire
rare-sapphireOP•6mo ago
useAppSession is in another file I put the ========= to show a file break and how im calling it. I got useAppSession isolated and getSessionData in its own file as well
extended-salmon
extended-salmon•6mo ago
probably best if you can provide a complete minimal example repo then
rare-sapphire
rare-sapphireOP•6mo ago
@Manuel Schiller https://github.com/j-mcfarlane/tanstack-min
GitHub
GitHub - j-mcfarlane/tanstack-min
Contribute to j-mcfarlane/tanstack-min development by creating an account on GitHub.
rare-sapphire
rare-sapphireOP•6mo ago
pnpm i and pnpm run build inside __root.tsx you can toggle between alias and absolute import to see the error @Manuel Schiller any ideas?
xenial-black
xenial-black•6mo ago
Your probably leaking server code into client, i would recommend adding vite-env-only plugin to figure out better what you are importing.
rare-sapphire
rare-sapphireOP•6mo ago
Thanks @nikus will try this

Did you find this page helpful?