blank page, but generouted scanned my route correctly

[mkvlrn]

not opening as a bug because it's probably something I've done with my configuration, since I have not creted my project using vite, but did it from scratch and added vite and configured it manually.

versions

@generated/react-router: 1.15.1
react: 18.2.0
react-dom: 12.2.0
react-router-dom: 6.20.1
vite: 5.0.6
@vitejs/plugin-react: 4.2.1

vite.config.ts

import { resolve } from 'node:path';
import generouted from '@generouted/react-router/plugin';
import react from '@vitejs/plugin-react';
import { defineConfig as baseDefineConfig } from 'vite';
import { mergeConfig, defineConfig as testDefineConfig } from 'vitest/dist/config.js';

const baseConfig = baseDefineConfig({
  plugins: [react(), generouted()],
  root: './src',
  resolve: { alias: { '#': resolve('.', './src') } },
  build: { outDir: '../build', emptyOutDir: true },
  server: { port: 3000, open: true },
  envDir: '../',
});

export default mergeConfig(
  baseConfig,
  testDefineConfig({
    test: {
      coverage: {
        reportsDirectory: 'coverage',
        reporter: ['lcov', 'html', 'text'],
        all: true,
        include: ['src/**/*'],
        exclude: ['src/index.tsx', '**/*.test.tsx', '**/*.d.ts'],
      },
      env: {
        NODE_ENV: 'test',
      },
      environment: 'jsdom',
      passWithNoTests: true,
      setupFiles: ['vite.setup.ts', 'dotenv/config'],
    },
  }),
);

src/index.tsx (that is loaded in src/index.html with <script type="module" src="index.tsx"></script>)

import { Routes } from '@generouted/react-router';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '#/index.css';

const root = createRoot(document.querySelector('#root') as HTMLElement);

root.render(
  <StrictMode>
    <Routes />
  </StrictMode>,
);

src/pages/index.tsx

export default function Hello() {
  return (
    <div className='m-auto'>
      <h1>Hello!</h1>
    </div>
  );
}

when running vite devserver it shows that generouted scanned 1 route, I'm assuming it's the only page I've got there

but when opening the dev server at localhost:3000, I got a blank page not even errors thrown in console.

i haven't used crete vite app or similar stuff in a while, but i've compared my configuration to what's being created when using the cli, and it's just about the same. also this is a type: "module" project, but that probably won't affect the usage of this plugin, right?

does this give out any immediate errors in configuration or usage i may have ignored?

[oedotme]

@mkvlrn Nothing seems unusual, could you please create a StackBlitz project based on this example?

[mkvlrn]

@mkvlrn Nothing seems unusual, could you please create a StackBlitz project based on this example?

It took me a long time to get back to this, I'm sorry. Was AFK for a bit.

I just created it with my current repo: https://stackblitz.com/~/github.com/mkvlrn/ts-react

Updated a few dependencies but the result is still the same. I think it has something to do with how I configured Vite (like I said, didn't use the cli) and I have a root property set in my configuration. Mostly because I wanted to have index.html inside src.

[oedotme]

@mkvlrn I've found that it's not a routing issue mainly, but the Vite config for the nested index.html entry is causing an issue with the routes scanning and rendering.

I'd suggest to follow Vite's entry file convention. In order to get the example to work, I moved the index.html in the project root instead of src/index.html and updated the script tag <script type="module" src="/src/index.tsx"></script> then removed the root: './src', from Vite config.