Routes not working in production with svelte-routing and electron-vite

[vicenteroa]

Describe the bug

Hello,

I’m experiencing an issue with my Electron app using svelte-routing and electron-vite. The routes work perfectly in development mode (npm run dev), but they do not work in production mode (npm run build and npm start). The navigation links are displayed, but the pages do not render correctly.

Steps to Reproduce:

• Create a new Svelte project.
• Install svelte-routing and electron-vite.
• Set up basic routes in App.svelte.
• Run the app in development mode: npm run dev (routes work as expected).
• Build the app: npm run build.
• Start the app in production mode: npm start (routes do not work).

• Expected Behavior:

The routes should work in production mode as they do in development mode.

Actual Behavior:

The navigation links are displayed, but the pages do not render correctly in production mode.

App.svelte

<script>
  import { Router, Route, Link } from 'svelte-routing';
  import Home from './Pages/Home/home.svelte';
  import Dashboard from './Pages/Dashboard.svelte';
</script>

<Router>
  <Route path="/" component={Home} />
  <Route path="/Dashboard" component={Dashboard} />
</Router>

Evidence (npm run dev)

Evidence (build - npm start)

Additional Context:

I’ve tried several configurations and ensured there are no errors in the console. The issue persists only in production mode. Any help would be greatly appreciated!

Used Scaffolding

create-electron

Used Package Manager

npm

Validations

• [X] Follow the Code of Conduct.
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alex8088]

https://electron-vite.org/guide/troubleshooting#vue-router-or-react-router-dom-works-in-development-but-not-production

[vicenteroa]

Hi @alex8088

Thank you for the documentation you provided. I used it as a guide and decided to find an alternative solution for svelte-routingby using svelte-spa-router to handle hash routes. With this approach, the routes now work perfectly in production.

Additionally, I didn’t need to modify the main/index.js file with the { hash: '...' } option as mentioned in the documentation for other routers.

  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}

Here’s the code I used:

<script>
    import Router , { location , link } from 'svelte-spa-router';
    import Home from './Pages/Home/home.svelte';
    import Dashboard from './Pages/Dashboard.svelte';
</script>

<nav>
    <a href="/">Home</a>
    <a href="#/dashboard">Dashboard</a>
</nav>

<Router routes={{
    '/': Home,
    '/dashboard': Dashboard
}} />

<hr>
/#{$location}

It might be worth considering adding this to the documentation to help other developers who are using Svelte in a similar setup.

Thanks again for your help, and I hope this can assist others!

Best regards!