Top-level await and No loader is configured errors

[devstojko]

It's me again! :)

I was able play around with hono server and during development I got this errors in console.

After restarting dev server errors gone.

It may be useful to report, still not sure if it's the real issue with the package itself or it's on my side. This happened when I stashed changes and created new branch then popped stash while dev server was active.

[rphlmr]

Can you share your vite config? It will only work with esm (should be the default for Remix)

[devstojko]

Sure:

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { devServer } from "react-router-hono-server/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  build: {
    target: "esnext",
  },
  plugins: [
    devServer(),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    noExternal: [
      "@rjsf/core",
      "@rjsf/utils",
      "@rjsf/validator-ajv8",
      "@rjsf/antd",
    ],
  },
});

[rphlmr]

Vite config is good. Rereading your initial comment, maybe the watcher gets lost at some point (like when you delete a route, Vite can crash).

I will try to reproduce and test if it happens on a classic Remix.

It doesn't surprise me, but if it only happens with my package, I would try to fix it.

[rphlmr]

In the screenshot, it looks like CJS, but I don't know what could go wrong here 🧐

[rphlmr]

One more thing, does your package.json have type "module"?

[devstojko]

Yup, type is module.

But I assume that issue is with the watcher itself and when I did stuff with branching it crashed. That was the first time those errors popped up in the console. Before that everything worked well.

[devstojko]

I will give you feedback in a few days how it's working in production when I deploy and QA test it.

But anyway this works really good so far. I was able to implement hono middlewares for protecting routes and refresh tokens with context. I saw on X your post with reference to awesome shelf.nu repo and in combination with your package saved a lot of time to setup Remix and Hono to work together.

Finally I can get rid of set headers in every single route for protection and adding combineHeaders for toasts then when you have to combine route that is public but may have some dynamic sections depending if user is authenticated or not...

[rphlmr]

Glad you like it! I’ve been using this stack for a year now on client projects and helped Shelf to migrate.

I haven't yet used this package in production, but I am currently migrating https://drizzle.run to it since responseStub has been removed 😬

[AlemTuzlak]

@devstojko this is likely caused by a misconfiguration in your tsconfig.json file. Can you post that here as well?

[devstojko]

@AlemTuzlak Here it is

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
}

[rphlmr]

Does this happen with code containing one of this dependencies?

noExternal: [
      "@rjsf/core",
      "@rjsf/utils",
      "@rjsf/validator-ajv8",
      "@rjsf/antd",
    ],

[devstojko]

@rphlmr I don't think so because rjsf was added few weeks ago and I never had this kind of error.