custom vite plugin options break the app

[subframe7536]

Describe the Bug

when using custom vite plugin options, routes will correctly detect, but the app will render nothing

the reproduction project is a fork of solid-router example, just change dir pages -> page1 and setup the vite plugin options.

Generouted Version

0.8.3

Your Example Website or App or Reproduction

https://stackblitz.com/edit/github-4k36rh?file=vite.config.ts

Steps to Reproduce the Bug or Issue

1. wait for deps install and run dev server
2. can not see anything in right panel

Expected Behavior

correctly render page routes

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Browser version: 115

Additional context

No response

[oedotme]

@subframe7536 That's expected, as the src/pages directory structure is required by convention, similar to Next.js, Astro and other routing systems.

However, there was a recent update to support src/pages within other directories such as client/src/pages or js/src/pages for projects that enforces certain structure to support some monorepos and non-node projects #73, #90, #107. The Vite plugin config customization is mainly for that.

Another thing I've noticed with your repro, that you're using custom plugin config without adding a custom src/routes.tsx for Vite to detect the routes as well. Here's an example for custom path usage with react-router-dom and its readme include the differences that you could follow with @solidjs/router as well.

Hope that clarifies your issue. Let me know your need for the customization and I'll be happy to help.

[subframe7536]

Thanks for your reply!

Finally I make all work in my local monorepo project, according to react-router-custom-path.

Please allow me to offer you some questions, suggestions or feature requests:

1. Adding jsdocs on vite plugin options and exposed functions is more convient for beginners to figure out the descriptions and example usages directly in the editor.
2. I'm not sure if I missed it or misunderstanded, but I couldn't find any relevant documentation that paths in import.meta.glob must use absolute path instead of relative path that start with .. Using relative path will need to add path prefix to URL to work it out.
3. I know it is conventional to use src/pages to put file-base routes files, but maybe allow to use custom regex instead of static src\/pages will be better
4. Please consider to add some params in the built-in route entry function like https://github.com/oedotme/generouted/blob/407b32239dd908661b9fff207e0389b74a0728de/packages/generouted/src/solid-router.tsx#L45 so there will no need to copy-paste source code in the example and some other cases. For instance:

import { render } from 'solid-js/web'
import { Routes } from '@generouted/solid-router'

render(
  () => Routes({
    preserved: import.meta.glob<Module>('/apps/web/src/pages/(_app|404).{jsx,tsx}', { eager: true })
    modals: import.meta.glob<Pick<Module, 'default'>>('/apps/web/src/pages/**/[+]*.{jsx,tsx}', { eager: true })
    routes: import.meta.glob<Module>(['/apps/web/src/pages/**/[\\w[-]*.{jsx,tsx}', '!**/(_app|404).*'])
  }), 
  document.getElementById('app')!
)

Thanks again for your excellent project!

[oedotme]

Hey @subframe7536, thanks a lot for your feedback and suggestions!

1. Definitely
2. Adding a note and link to Vite's docs for reference would help
3. 4, would be tricky because if I recall correctly there are limitations to using import.meta.glob. Also to clarify, generouted is compatible with monorepos without any customization. The main purpose for customization is to customize the route-based exports and the components builder function, and for that you'd need to have a full copy of the integration. Customization was noted to not be recommended in general, but it's there in case needed.

Please let me what kind of monorepo setup you're using, and as I mentioned you might not need customization in the first place.

Thanks!

[subframe7536]

After some tries, I have successfully completed the majority of tasks that fit to the default configuration. However, the usage of built-in router will cause ReferenceError: Cannot access 'default' before initialization. Any suggestions are appreciated Here is reproduction repo and steps record

[oedotme]

Could you use the lazy import at src/pages/_app.tsx as well? If you mix lazy and non-lazy imports from generouted you'd get an intialization error.

You can find a related note on the docs, and here's a related issue #98

[subframe7536]

Thanks, it works! Sorry for not reading the document carefully😢

[oedotme]

No worries, thanks for the update.