Remix & Payload

[colinramsay]

I've created a new Remix app with create-remix and then copied over the (hopefully) relevant parts of a Payload app created with create-payload-app:

https://github.com/colinramsay/remixpayload

It starts up ok (npm run dev), but then when creating/editing an item in collection I see a blank screen with:

Uncaught TypeError: _reactRouterDom.withRouter is not a function

I've been down a rabbithole with this. I actually got it working by removing package-lock.json, rm -rf node_modules and then yarn install; yarn dev but have had various other issues since.

Does anyone have a working repo with Remix & Payload?

[DanRibbens]

Here is a repo to compare your code against. https://github.com/payloadcms/remix-server

If you have more specific questions we can try and answer them for you.

[colinramsay]

Brilliant, I missed this example when I was looking. Thanks!

[DanRibbens]

You hadn't missed anything, it was private before as it is still WIP. Cheers!

[jonaswre]

Thanks for the example.

Are there any general preparation I need to do before moving an application that was started on this example into production?

I'm specifically asking about this?

https://github.com/payloadcms/remix-server/blob/main/apps/server/src/index.ts#L35-L41

[dalyathan]

Hello,
What changes need to be made if the web app was an ESM module instead? I keep running into the following error

@org/server:dev: webpack built 434db12867a9cf1106c8 in 1244ms
@org/server:dev: webpack compiled successfully
@org/server:dev: Express server listening on port 3000
@org/web:dev: 💿 Rebuilt in 3.2s
@org/server:dev: Error [ERR_REQUIRE_ESM]: require() of ES Module /remix-server/apps/web/build/index.js from /remix-server/apps/server/src/index.ts not supported.
@org/server:dev: Instead change the require of index.js in /remix-server/apps/server/src/index.ts to a dynamic import() which is available in all CommonJS modules.
@org/server:dev:     at require.extensions.<computed> [as .js] (/Users/surafel/Documents/mcrmarkets/remix-server/node_modules/.pnpm/ts-node@10.9.2_@swc+core@1.3.78_@types+node@18.19.83_typescript@4.9.5/node_modules/ts-node/dist/index.js:851:20)
@org/server:dev:     at /Users/surafel/Documents/mcrmarkets/remix-server/apps/server/src/index.ts:55:28
@org/server:dev:     at Layer.handle [as handle_request] (/Users/surafel/Documents/mcrmarkets/remix-server/node_modules/.pnpm/express@4.21.2/node_modules/express/lib/router/layer.js:95:5)