add react-router-devtools

[arslan2012]

normally if you're using react-router-devtools, you should also add it to your vite.config, but it's not present there

And also only the default template has this dependency, so I think this might be mistakenly added

[brookslybrand]

Seems reasonable to me

@arslan2012 will you rebase and run pnpm i from root?

Also, if you or anyone is interested in actually hooking up react-router-devtools by default, I think that'd be a cool alternative

[arslan2012]

Okay, I hooked up react-router-devtools to most of them, but there's two of them that I didn't

1. I can't make cloudflare-d1 work, as soon as I add reactRouterDevTools() to the vite plugins array it throws an error

[vite] Internal server error: require is not defined
      at eval (~/react-router-templates/node_modules/.pnpm/beautify@0.0.8/node_modules/beautify/index.js?v=4e4d6ab9:5:20)
      at instantiateModule (file:///~/react-router-templates/node_modules/.pnpm/vite@5.4.11_@types+node@20.17.6_lightningcss@1.29.1/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:11)

2. I didn't add it to the minimal template, I don't know if this belongs in a minimal build.

@brookslybrand Any suggestions?

[brookslybrand]

Awesome, thanks @arslan2012!

1. Hmmm, yeah not sure what's going on there. @AlemTuzlak any idea what's going on here?

2. Agreed, it shouldn't be in the minimal template. Thanks!

[brookslybrand]

Hmmm, kind of weird that including react-router-devtools is causing the tests to timeout. I don't know if it's just because the import is super costly or what.

@pcattori if you have a second to look at it that'd be cool, but all good if not

[AlemTuzlak]

@brookslybrand so the reason this happens is because some of the depenendencies need to be optimized to work on cloudflare, as per the docs:
https://github.com/forge-42/react-router-devtools?tab=readme-ov-file#cloudflare

[arslan2012]

@brookslybrand so the reason this happens is because some of the depenendencies need to be optimized to work on cloudflare, as per the docs: https://github.com/forge-42/react-router-devtools?tab=readme-ov-file#cloudflare

Yes, this is also kinda mentioned in react dev tools docs, but when I add them to vite.config

optimizeDeps: {
    include: [
      "beautify",
      "lightningcss",
    ],
  },

I get

Failed to resolve dependency: beautify, present in 'optimizeDeps.include'
Failed to resolve dependency: lightningcss, present in 'optimizeDeps.include'