How to use LocatorJS with react router framework ?

[MatteoGauthier]

Hey ! Does someone know how to make locatorjs work with react-router framework, I tried with the extension and the library

[mentallabyrinth]

Appears to be an issue with React Router v7? Haven't had any issues with previous versions. However, cannot get it working using React Router v7. Guessing the reason is because RRv7 uses React 19. Looks like it's more of a React 19 issue: #161

[mentallabyrinth]

Turns out it's not a React 19 issue, It's a RR7 centric. If using "framework" mode like I am, the Vite dev server needs configuration to use babel. First install the plugin vite-plugin-babel then add it to the dev server plugins like so:

import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import babel from "vite-plugin-babel";

export default defineConfig({
  plugins: [
    babel({
      include: ["app/**/*"],
      filter: (name) => name.endsWith(".ts") || name.endsWith(".tsx"),
      babelConfig: {
        presets: ["@babel/preset-typescript"],
      },
    }),
    tailwindcss(),
    reactRouter(),
    tsconfigPaths(),
  ],
});

Babel functions as normal from here out, so you can use babel rc file, config files, or add more config inline. Here's the Babel config used for posterity:

export default {
  plugins: [
    [
      "@locator/babel-jsx/dist",
      {
        env: "development",
      },
    ],
  ],
};

Everything works as expected now. Thanks.