keystonejs / keystone

The superpowered headless CMS for Node.js — built with GraphQL and React
https://keystonejs.com
MIT License
9.28k stars 1.16k forks source link

Framework Remix example server error #9340

Open indexofmetals opened 2 months ago

indexofmetals commented 2 months ago

Following the steps in the framework-remix example, I get to the part where you go to localhost:3000 and get the following server error

Unexpected Server Error

TypeError: (0 , import_isbot.default) is not a function

Using node version v20.17.0 on firefox for ubuntu.

Here is the console output

Remix App Server started at http://localhost:3000 (http://192.168.0.8:3000)
TypeError: (0 , import_isbot.default) is not a function
    at handleRequest (/home/alex/Projects/keystone/node_modules/.pnpm/@remix-run+dev@1.19.3_@remix-run+serve@1.19.3_@types+node@20.16.5_babel-plugin-macros@3.1.0_terser@5.31.6/node_modules/@remix-run/dev/dist/config/defaults/node/entry.server.react-stream.tsx:18:10)
    at handleDocumentRequestRR (/home/alex/Projects/keystone/node_modules/.pnpm/@remix-run+server-runtime@1.19.3/node_modules/@remix-run/server-runtime/dist/server.js:216:18)
    at requestHandler (/home/alex/Projects/keystone/node_modules/.pnpm/@remix-run+server-runtime@1.19.3/node_modules/@remix-run/server-runtime/dist/server.js:61:18)
    at /home/alex/Projects/keystone/node_modules/.pnpm/@remix-run+express@1.19.3_express@4.19.2/node_modules/@remix-run/express/dist/server.js:39:22
wchorski commented 15 hours ago

Seeing as this example project is using Remix 1, I've attempted to start with a fresh Remix 2 install and slap in keystone related files into it.

The results are mixed, but it is working. I would appreciate some guidance if there is any issues in this setup.

Init Remix App

First I use npx create-remix@latest to get a fresh Remix app up and running.

Repo

Check out my repo. I just merged the package.json files and installed the dependencies. In the app I just copied bits of the keystone context code so I could do a simple query and fetch some db data.

https://github.com/wchorski/kypr

The Long Answer

there was a lot of juggling to get both keystone dev and remix vite:dev working as they both ask for a different project configs

In production I deploy both the keystone admin dashboard and my custom frontend as 2 separate apps. So I need to be able to develop on both sides.

with type as module this error happens with keystone

 yarn ks:dev
yarn run v1.22.22
$ keystone dev
✨ Starting Keystone
Error [ERR_REQUIRE_ESM]: require() of ES Module /Volumes/edata/vscode/remix-new/.keystone/config.js from /Volumes/edata/vscode/remix-new/node_modules/@keystone-6/core/dist/createExpressServer-b4283133.cjs.dev.js not supported.
config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Volumes/edata/vscode/remix-new/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at mod.require (/Volumes/edata/vscode/remix-new/node_modules/next/dist/server/require-hook.js:65:28)
    at Object.importBuiltKeystoneConfiguration (/Volumes/edata/vscode/remix-new/node_modules/@keystone-6/core/dist/createExpressServer-b4283133.cjs.dev.js:40:10)
    at async dev (/Volumes/edata/vscode/remix-new/node_modules/@keystone-6/core/scripts/cli/dist/keystone-6-core-scripts-cli.cjs.dev.js:1241:20) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I removed type from package.json and got another error

 yarn dev   
yarn run v1.22.22
$ remix vite:dev
The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
(node:25234) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///Volumes/edata/vscode/remix-new/postcss.config.js is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
To eliminate this warning, add "type": "module" to /Volumes/edata/vscode/remix-new/package.json.
(Use `node --trace-warnings ...` to show where the warning was created)
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

I renamed vite.config.ts to vite.config.mts and that seemed to hush the error.