Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Remix & Payload

default discord avatar
colinramsay3 years ago
1 2

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?

  • Selected Answer
    discord user avatar
    DanRibbens
    3 years ago

    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.

    3 replies
  • default discord avatar
    colinramsay3 years ago

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

  • discord user avatar
    DanRibbens
    3 years ago

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

  • default discord avatar
    jonaswre2 years ago

    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

  • default discord avatar
    dalyathan11 months ago

    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)
Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.