samedi 28 août 2021

Blank screen (because of not found files) in built electron and react app

i finished the development of my app, using electron and react. I need to build an executable with electron-builder. When i open the .exe it throws a blank screen and these errors in the console:

I was reading a lot, and realize that people suggest to use HashRouter instead of BrowserRouter, i did it but still not working.

Here is my react routing index.js:

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Switch, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import { Home, Package } from './pages';
import { NavBar } from './shared/components';
import './index.scss';

function App() {
  return (
    <Fragment>
      <Provider store={store}>
        <NavBar/>
        <HashRouter>
          <Switch>
            <Route path="/" component={Home} exact/>
            <Route path="/package" component={Package} exact/>
          </Switch>
        </HashRouter>
      </Provider>
      <p id="my-creds">by @gianlop3z</p>
    </Fragment>
  );
};

ReactDOM.render(<App/>, document.getElementById('root'));

And my electron.js:

const { default: devtools, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');

function createWindow() {
  let win = new BrowserWindow({
    width: 950, height: 700,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  });
  win.loadURL(
    isDev ?
      'http://localhost:3000' :
      `file://${path.join(__dirname, '../build/index.html')}`);
};

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  };
});

app.on('ready', () => {
  createWindow();
  devtools([REACT_DEVELOPER_TOOLS,  REDUX_DEVTOOLS])
    .then(name => console.log(`DevTools was added: ${name}!`))
    .catch(e => console.error(e));
});



Aucun commentaire:

Enregistrer un commentaire