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.
"electron": "^5.0.0",
"electron-builder": "^20.39.0",
"electron-webpack": "^2.6.2",
"react-router-dom": "^5.0.0"
https://github.com/kyle-mccarthy/react-router-dom-electron-issue
The best way to reproduce this error is through the provided github repo.
The router should continue to work under the production environment.
The router does not correctly work in production.
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"
}
}
Related questions