profile
viewpoint

Ask questionsreact-router-dom v5 does not work with electron in production

I'm having an issue using react-router-dom with electron. In development, the router correctly functions and routes users between the different pages. In production, the router no longer functions correctly. In addition to the repo showing the issue, I have some gifs that can quickly outline the problem. Working in development, not working in production.

I am not using redux, and I am using the HashRouter, but I have also tried the MemoryRouter with no luck...

edit I just tested with version 4 of react router dom and it works correctly in production and development. So it seems that this issue is related to version 5.

Version

"electron": "^5.0.0",
"electron-builder": "^20.39.0",
"electron-webpack": "^2.6.2",
"react-router-dom": "^5.0.0"

Test Case

https://github.com/kyle-mccarthy/react-router-dom-electron-issue

Steps to reproduce

The best way to reproduce this error is through the provided github repo.

Expected Behavior

The router should continue to work under the production environment.

Actual Behavior

The router does not correctly work in production.

ReactTraining/react-router

Answer questions NileDaley

I've been folllowing this issue as I've had a similar problem. I've tested in my project and have been able to upgrade to v5.0.0 and the router works in production.

The issue may be that electron-webpack may be breaking react-router-dom in production. You can whitelist react-router-dom to solve this.

Add a electron-webpack.json file containing the following:

{
    "whiteListedModules": ["react-router-dom"]
}

I wasn't able to get it to work with your demo project, but that might be just a difference in build configuration. I hope this was at least some help to you.

For what it's worth, here's my scripts and build config from package.json

{
    "scripts": {
        "dev": "electron-webpack dev",
        "test": "jest",
        "showCoverage": "open coverage/lcov-report/index.html",
        "compile": "electron-webpack",
        "build:mac": "yarn compile && electron-builder --mac --x64",
        "build:win32": "yarn compile && electron-builder --win --ia32"
    },
    "build": {
        "appId": "<my app id>",
        "productName": "<my app name>",
        "directories": {
            "output": "./out/"
        },
        "win": {
            "target": "nsis",
            "asar": false
        },
        "buildVersion": "1.0.0"
    }
}
useful!

Related questions

Cannot read property &#39;location&#39; of undefined at useLocation hot 9
Route is not exported in react-router-dom hot 6
Error: Invariant failed: You should not use <Switch> outside a <Router> hot 3
Replace componentWillMount by UNSAFE_componentWillMount for v3 hot 3
Use new forwardRef API in withRouter HOC hot 2
useParams returns empty object when used outside of Route hot 2
Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component hot 2
useParams and other new hooks are not exported in react-router-dom & react-router hot 2
Prompt in React 16 "Warning: A history supports only one prompt at a time" hot 1
Fix <Route children> hot 1
Route is not exported in react-router-dom hot 1
bug: react router dom 4.3.1 pulling react-router 4.4.0 changes after latest publish hot 1
[React.memo] Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function` hot 1
Receiving ESM Error but not using ESM hot 1
useParams and other new hooks are not exported in react-router-dom & react-router hot 1
source:https://uonfu.com/
Github User Rank List