Remix/Vite build issue | Trigger.dev | Page 1

thorn idol Mar 6, 2024, 10:51 PM

#

Hello 👋 - I wonder if anyone has a magic wand for this. I have just switched my project to Remix/Vite and I'm having some issues building the project with reference to trigger.dev. See below:

error during build:
RollupError: "Buffer" is not exported by "__vite-browser-external", imported by "node_modules/@trigger.dev/core-backend/dist/index.mjs"

1: import { Buffer } from 'node:buffer';
            ^
2: import { env } from 'node:process';

I tried a few things but nothing worked. Any ideas?

modest musk Mar 7, 2024, 8:28 AM

#

@marsh vapor did you face this problem?

marsh vapor Mar 7, 2024, 8:29 AM

#

I think I had something similar to this, hold on and I can post my Vite configs here. Had a computer crash so been busy setting things up again :/

#

vite.config.ts

import { unstable_vitePlugin as remix } from '@remix-run/dev'
import { installGlobals } from '@remix-run/node'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import remixConfig from './remix.config'

installGlobals()

export default defineConfig({
    server: {
        port: 3000,
    },

    build: {
        sourcemap: process.env.NODE_ENV !== 'production',
    },
    plugins: [remix(remixConfig), tsconfigPaths()],
})

remix.config.js (I'm using remix-flat-routes, so if you're not using it you can just omit the routes: config)

import { flatRoutes } from 'remix-flat-routes'

/** @type {import('@remix-run/dev').AppConfig} */
export default {
    ignoredRouteFiles: ['**/.*'],

    serverDependenciesToBundle: ['@trigger.dev/react'],
    routes: (defineRoutes) => {
        return flatRoutes('routes', defineRoutes)
    },
}

app/routes/api.trigger.ts

import { type ActionFunctionArgs, json } from '@vercel/remix'
import { triggerClient } from '~/backend/clients/triggerClient'

export async function action({ request }: ActionFunctionArgs) {
    await import('~/jobs/myJob.server') // IMPORTANT with the .server.ts extension or things won't work
    [...,]

    const response = await triggerClient.handleRequest(request)
    if (!response) {
        return json({ error: 'Not found' }, { status: 404 })
    }

    return json(response.body, { status: response.status, headers: response.headers })
}

All your xxxJob.server.ts needs to export the jobs explicitly, e.g.:

export const myJob = triggerClient.defineJob({
    [...]

triggerClient.ts

import { TriggerClient } from '@trigger.dev/sdk'
import { env } from '~/env'

export const triggerClient = new TriggerClient({
    id: env.server.TRIGGER_PROJECT_ID,
    apiKey: env.server.TRIGGER_API_KEY,
    apiUrl: env.server.TRIGGER_API_URL,
})

#

Then I'm building/deploying to Vercel that also requires some manual things to be done as the official Vercel/Remix/Vite adapter is not yet completed

#

Let me know if you need to see any other files/configs 🙂

#

Also - running the remix vite:build for Vercel builds doesn't work, What I ended up doing was a few custom build/deploy scripts:

clean.sh

#!/bin/bash
set -eu -o pipefail

pushd "$(dirname "${BASH_SOURCE[0]}")/../"

rm -rf .vercel/output
rm -rf ./build

mkdir -p .vercel/output
mkdir -p .vercel/output/static
mkdir -p .vercel/output/functions/index.func

popd

build.sh

#!/bin/bash
set -eu -o pipefail

pushd "$(dirname "${BASH_SOURCE[0]}")/../"


npm run build

# config.json
cp config.json .vercel/output/config.json

# static
cp -r ./build/client/. .vercel/output/static
rm -rf .vercel/output/static/.vite

cp -r ./build/server/. .vercel/output/functions/index.func
mv .vercel/output/functions/index.func/index.js .vercel/output/functions/index.func/index.mjs
rm -rf .vercel/output/functions/index.func/.vite

# functions
cp .vc-config.json .vercel/output/functions/index.func/.vc-config.json

npx esbuild ./app/adapters/vercel-serverless.ts \
  --outfile=.vercel/output/functions/index.func/index.mjs \
  --metafile=./build/esbuild-metafile-vercel-serverless.json \
  --keep-names \
  --define:process.env.NODE_ENV='"production"' \
  --banner:js="import { createRequire } from 'module'; const require = createRequire(import.meta.url);" \
  --bundle --minify --format=esm --platform=node

popd

deploy.sh (prod)

#!/bin/bash
set -eu -o pipefail

pushd "$(dirname "${BASH_SOURCE[0]}")/../"

NODE_ENV=production vercel deploy --prebuilt  --prod

popd

#

And you will also need to add a .vs-config.json:

{
    "runtime": "nodejs20.x",
    "handler": "index.mjs",
    "launcherType": "Nodejs",
    "regions": ["lhr1"]
}

and a config.json

{
    "version": 3,
    "routes": [
        {
            "src": "^/assets/(.*)$",
            "headers": {
                "cache-control": "public, immutable, max-age=31536000"
            }
        },
        {
            "handle": "filesystem"
        },
        {
            "src": ".*",
            "dest": "/"
        }
    ]
}

thorn idol Mar 8, 2024, 2:53 AM

#

Thanks @marsh vapor - really appreciate it. I'll digest this and see if I can make it work. I deploy my app to Railway rather than Vercel. I'll figure out the deployment once I get it working locally first 🙂 Thanks again!

#

Legendary. All I needed to do was replace this:

export * from "~/jobs/email.server";

with this:

export async function action({ request }: ActionFunctionArgs) {
    await import('~/jobs/email.server');
})

You saved me a lot of time 🍺

marsh vapor Mar 8, 2024, 9:31 AM

#

I think @modest musk was the one that helped me figure that one out 😅 anyway let me know if there are other issues, I've seen a lot of weird ones when I moved to Vite 🙂

thorn idol Mar 8, 2024, 10:05 AM

#

Thanks guys! Yeah getting loads of warnings at build time, but nothing to do with Trigger.dev though. One of them is:

 React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I definitely didn't forget to export component, so scratching my head here. Also getting lots of these ones

Error when using sourcemap for reporting an error: Can't resolve original location of error.

None of those are related to trigger.dev though so I'll try to bug someone else about that, unless you've seen these before too?

errant turret Mar 8, 2024, 10:16 AM

#

Could it be related to this: https://github.com/remix-run/remix/issues/8828

GitHub

2.7.0 : MUI named import generate error · Issue #8828 · remix-run/r...

Reproduction Clone : https://github.com/raskyer/remix-bug npm run dev Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite component...

thorn idol Mar 8, 2024, 10:44 AM

#

Thanks @errant turret - will check that out. I use Tailwind but definitely relevant to my issue.

thorn idol Mar 8, 2024, 11:45 AM

#

My production build is fine - no errors. That's a good thing. I'll figure out the issue in dev environment later on, thanks for your help guys.

modest musk Mar 8, 2024, 11:50 AM

#

We're going to migrate out marketing site over to Vite soon, so all of this is interesting. Looking forward to the MDX features alot.

marsh vapor Mar 8, 2024, 5:27 PM

#

I've seen that error before but cannot for my life remember what the issue was

#

But anyway - there are a lot of quirsk and issues - but at the end I'm really happy that I migrated to Vite although things aren''t running 100%. The dev experience is so much better and faster (right now I'm on an old Intel Mac from 2019)

thorn idol Mar 8, 2024, 10:03 PM

#

The speed is amazing! I can live with warnings - for now

thorn idol Mar 8, 2024, 10:37 PM

#

Here's another Vite mystery. I have enum in workflow.ts file:

export enum NodeTypes {
  FORM = "formNode",
  EMAIL = "emailNode",
  WEBHOOK = "webhookNode",
  DECISION = "decisionNode"
}

I then reference NodeTypes in somefile.ts like this:

import { NodeTypes } from workflow

const nodeType = NodeTypes.FORM

Vite gives me this:
Internal server error: Cannot read properties of undefined (reading 'FORM')
Simply moving the enum from workflow.ts into somefile.ts fixes it, but I don't want to do that as I want to reuse this enum everywhere.

thorn idol Mar 8, 2024, 11:01 PM

#

Ah, circular imports. Fixed 🙂

marsh vapor Mar 14, 2024, 6:28 PM

#

@thorn idol I know you don't run on Vercel but have you seen anything similar to this error when the Vite build seems to be confused about different routes?

Error: EEXIST: file already exists, symlink 'api/trigger.func' -> '/vercel/output/functions/:countryCode.func'

I bumped Remix to v2.8.1 which now should have official Vite support but for some reason it seems as if the Trigger.dev routes collide.

I also modified my vite.config.ts to follow the "new" way of defining serverDependenciesToBundle through Vite, e.g.:

import { vitePlugin as remix } from '@remix-run/dev'
import { installGlobals } from '@remix-run/node'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import { vercelPreset } from '@vercel/remix/vite'
import { flatRoutes } from 'remix-flat-routes'

installGlobals()

export default defineConfig({
    server: {
        port: 3000,
    },

    esbuild: {},

    build: {
        sourcemap: process.env.NODE_ENV !== 'production',
    },

    ssr: {
        noExternal: ['@trigger.dev/react'],
    },

    plugins: [
        remix({
            ignoredRouteFiles: ['**/.*'],
            presets: [vercelPreset()],
            routes: (defineRoutes) => {
                return flatRoutes('routes', defineRoutes)
            },
        }),
        tsconfigPaths(),
    ],
})

thorn idol Mar 15, 2024, 12:21 AM

#

hmmm - I haven't seen this one to be honest. Assuming this only happens on Vercel and your local version is fine? Maybe check that you select the same Node runtime version in Vercel, as your local version to build the app. Another one may be case-sensitivity in your package.json - I saw something similar here - https://github.com/pnpm/pnpm/issues/3440

I wonder if swapping npm/yarn and vice-versa would give you the same result?

GitHub

`EEXIST: file already exists, symlink` due to case sensitivity not ...

This is very much a far edge case I came across but worth noting down. pnpm version: 6.0.1 Code to reproduce the issue: package.json ... "dependencies": { "lodash.fromPairs": &q...

marsh vapor Mar 16, 2024, 5:25 PM

#

Ok after playing around a bit there were a few issues -

Had to bump vercel to the latest version due to Remix/Vite issues that since mine had beed addressed, also I was using remix-flat-routes which right now does not play nice with Vercel deployments so removed it and went back to the standard Remix routing structure, and all is fine.

@modest musk I think the new Remix version 2.8.1 with all their things with Vite now plays nice with Trigger.dev as well, given some of the above caveats with how to import your jobs 🙂

modest musk Mar 16, 2024, 7:20 PM

#

Ok that’s good to know

#

I think we’ll upgrade our marketing site to Vite soon. It deploys to Vercel. I think we’re a way off migrating the app, feels high risk

marsh vapor Mar 17, 2024, 7:51 AM

#

The app feels high risk indeed, but I think updating the docs for how to set up Trigger.dev with Remix would be good as Vite is now the official way at Remix to run it 🙂

#Remix/Vite build issue