https://typesense.org logo
Join Slack
Powered by
Is anyone able to get remix to work with typesense...
# community-help
i
Is anyone able to get remix to work with typesense? It worked perfectly fine before with Algolia. The weird thing is that it works in local development and everything works fine. When I deploy to fly.io it no longer works. And I get an error in the console that says 
Uncaught TypeError: Failed to resolve module specifier "crypto". Relative references must start with either "/", "./", or "../".
I can go into more detail but it seems like this is a ESM/CJS issue.
j
Although we had to deploy it on Vercel, and not on Cloudflare Workers because of this issue IIRC: https://github.com/typesense/typesense-js/issues/161
i
The project uses the classic remix compiler. I am using vite.config.ts now. https://remix.run/docs/zh/main/file-conventions/remix-config
j
CC: @Hayden Hoang
h
@Ivan Vukusic your app is running in nodejs on fly.io right? Could you provide the stack trace and the 
vite.config.ts
?
i
@Hayden Hoang Yes, it is running nodejs on fly.io. The stack trace isn't anything besides that console error I mentioned before:
Copy code
Uncaught TypeError: Failed to resolve module specifier "crypto". Relative references must start with either "/", "./", or "../".
I'll show you the difference with a quick video of the difference running locally and when it gets sent to my staging app. It has been a second since I touched the vite.config.ts but this is what it should have been liked when Algolia worked.
Copy code
import { vitePlugin as remix } from '@remix-run/dev'
import { sentryVitePlugin } from '@sentry/vite-plugin'
import { glob } from 'glob'
import { flatRoutes } from 'remix-flat-routes'
import { defineConfig } from 'vite'
import { remixDevTools } from 'remix-development-tools'
import { envOnlyMacros } from 'vite-env-only'
import { cjsInterop } from 'vite-plugin-cjs-interop'

const MODE = process.env.NODE_ENV

export default defineConfig({
	//WARN: reason why <https://threads.typesense.org/2Lb60>
	// ssr: {
	// 	noExternal: ['typesense-instantsearch-adapter'],
	// },
	build: {
		cssMinify: MODE === 'production',

		rollupOptions: {
			external: [/node:.*/, 'stream', 'crypto', 'fsevents', 'posthog'],
		},

		assetsInlineLimit: (source: string) => {
			if (
				source.endsWith('sprite.svg') ||
				source.endsWith('favicon.svg') ||
				source.endsWith('apple-touch-icon.png')
			) {
				return false
			}
		},

		sourcemap: true,
	},
	server: {
		watch: {
			ignored: ['**/playwright-report/**'],
		},
	},
	plugins: [
		envOnlyMacros(),
		remixDevTools(),
		cjsInterop({
			dependencies: ['typesense-instantsearch-adapter'],
		}),
		remix({
			ignoredRouteFiles: ['**/*'],
			serverModuleFormat: 'esm',
			routes: async defineRoutes => {
				return flatRoutes('routes', defineRoutes, {
					ignoredRouteFiles: [
						'.*',
						'**/*.css',
						'**/*.test.{js,jsx,ts,tsx}',
						'**/__*.*',
						// This is for server-side utilities you want to colocate
						// next to your routes without making an additional
						// directory. If you need a route that includes "server" or
						// "client" in the filename, use the escape brackets like:
						// my-route.[server].tsx
						'**/*.server.*',
						'**/*.client.*',
					],
				})
			},
		}),
		process.env.SENTRY_AUTH_TOKEN
			? sentryVitePlugin({
					disable: MODE !== 'production',
					authToken: process.env.SENTRY_AUTH_TOKEN,
					org: process.env.SENTRY_ORG,
					project: process.env.SENTRY_PROJECT,
					release: {
						name: process.env.COMMIT_SHA,
						setCommits: {
							auto: true,
						},
					},
					sourcemaps: {
						filesToDeleteAfterUpload: await glob([
							'./build/**/*.map',
							'.server-build/**/*.map',
						]),
					},
				})
			: null,
	],
})
I have tried many iterations to try and make this work. Mainly the steps recommended to try and at the remix link here: https://remix.run/docs/en/main/guides/vite#esm--cjs When trying to make it work with cjs-interop plugin mentioned it wouldn't even run and I get this error:
Copy code
11:21:53 PM [vite] Error when evaluating SSR module /node_modules/typesense-instantsearch-adapter/lib/TypesenseInstantsearchAdapter.js:
|- ReferenceError: require is not defined
    at eval (/Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/typesense-instantsearch-adapter/lib/TypesenseInstantsearchAdapter.js:5:30)
    at instantiateModule (file:///Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:52870:11)

11:21:53 PM [vite] Error when evaluating SSR module /app/routes/_marketing+/index.tsx:
|- ReferenceError: require is not defined
    at eval (/Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/typesense-instantsearch-adapter/lib/TypesenseInstantsearchAdapter.js:5:30)
    at instantiateModule (file:///Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:52870:11)

11:21:53 PM [vite] Error when evaluating SSR module virtual:remix/server-build:
|- ReferenceError: require is not defined
    at eval (/Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/typesense-instantsearch-adapter/lib/TypesenseInstantsearchAdapter.js:5:30)
    at instantiateModule (file:///Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:52870:11)

ReferenceError: require is not defined
ReferenceError: require is not defined
    at eval (/Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/typesense-instantsearch-adapter/lib/TypesenseInstantsearchAdapter.js:5:30)
    at instantiateModule (file:///Users/vonkoff/GoodUnionJobs/remix-guj/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:52870:11)
@Hayden Hoang Here is a gif. If you need me give you more info lmk! So, the first is in localhost. As you can see it works fine. The only console errors are issues about images that doesn't concern the search. Then when we see the fly.io staging app issues arise. For now I tried to do my own thing and switch out of using ssr. I basically setup ssr as recommended in the algolia documentation here for remix (https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/). That wasn't working so I tried to do my own thing to switch back not using ssr. So in the staging website you see it is just stuck at "loading search". Before with ssr the blocks of jobs and data showed up but nothing was responsive or dynamic. I couldn't click on any of the blocks to open it up.
h
@Ivan Vukusic
The stack trace isn't anything besides that console error I mentioned before:
Maybe it is hidden from the client, have you checked fly io logging? (You should use SSR for this)
Before with ssr the blocks of jobs and data showed up but nothing was responsive or dynamic. I couldn't click on any of the blocks to open it up.
Did you get that same crypto module error regardless of whether SSR is used? It could be possible that 
crypto
isn't available in production environment, can you try again after removing 
'crypto'
from 
rollupOptions
?
i
@Hayden Hoang was that one line of code! Works even with ssr still enabled. Basically "removing 
'crypto'
from `rollupOptions`` " was the solution.
🙌 1
Thank you for the help. Would it be of service to fix up the https://github.com/typesense/showcase-guitar-chords-search-remix repo to the newest version of remix and apply these changes? @Hayden Hoang
h
Would it be of service to fix up the https://github.com/typesense/showcase-guitar-chords-search-remix repo to the newest version of remix and apply these changes?
Thanks for asking! I have opened a PR for that here. @Jason Bosco could you merge it?
🙌 1
✅ 1
2 Views
Open in Slack
PreviousNext
Powered by