We Keep Coding

Electron distribution build displays a blank page

I am working now upon an Electron + React-JS app, and have to create a distribution build. The problem is that after creating that build and launching the resulted file (in our case the compiled app), the app shows me a blank screen without rendering any of ./src folder's content. Everything's working well when launching Electron in dev mode.
For some reference, I'll attach the contents of my package.json, electron's main.js and React's index.js and App.js files.
Package.json
{
...
"build": {
"appId": ...,
"mac": {
"category": ...
},
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
}
},
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"#reach/router": "^1.2.1",
"apexcharts": "^3.10.1",
"apisauce": "^1.1.1",
"cross-env": "^6.0.3",
"electron-is-dev": "^1.1.0",
"formik": "^2.0.4",
"moment": "^2.24.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-loading-overlay": "^1.0.1",
"react-notification-system": "^0.2.17",
"react-pin-input": "^0.9.0",
"react-redux": "^7.1.3",
"react-scripts": "3.2.0",
"react-table": "^6.10.3",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"reduxsauce": "^1.1.1",
"seamless-immutable": "^7.1.4",
"yup": "^0.27.0"
},
"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"react-eject": "react-scripts eject",
"electron-postinstall": "electron-builder install-app-deps",
"electron-start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"build-mw": "yarn react-build && electron-builder -mw"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^5.0.0",
"electron": "^7.1.1",
"electron-builder": "^22.1.0",
"wait-on": "^3.3.0"
}
}
Electron main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({width: 900, height: 680});
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
mainWindow.on('closed', () => mainWindow = null);
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
React index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
React App.js
import React from 'react';
import './App.css';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import {persistStore} from 'redux-persist';
import {PersistGate} from 'redux-persist/integration/react';
import Navigation from './Navigation';
import {RootReducer} from './Redux/Root.Reducer';
const store = createStore(RootReducer);
const persistor = persistStore(store);
function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Navigation />
</PersistGate>
</Provider>
);
}
export default App;
P.S. As opposed to the tutorials found on the internet about linking Electron with React-JS, I've placed Electron's main.js file under ./public directory, in my React project.

Uncaught Error: Minified React error #130

So here is what my code looks like
---------index.js-----
var React =require('react');
var ReactDOM =require('react-dom');
var App=require('../components/App');
ReactDOM.render(<App />, document.getElementById('app'));
---------App.js-----
var React = require('react');
class App extends React.Component {
render() {
return(
<div>
<h1>HI wassup</h1>
</div>
);
}
}
export default App;
---------package.json-----
{
"name": "views",
"version": "1.0.0",
"description": "learning",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --hot && webpack"
},
"author": "vinayak",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"unminified-webpack-plugin": "^2.0.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
---------webpackconfig-----
const HTMLWebpackPlugin=require('html-webpack-plugin');
const webpack=require('webpack');
const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
const HTMLWebpackPluginConfig=new HTMLWebpackPlugin({
template: '../../views/index.hbs',
filename:'index.hbs'
});
module.exports={
entry:__dirname + '/app/index.js',
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
}
]
},
plugins: [
new UnminifiedWebpackPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
],
devtool: 'source-map',
output:{
filename:'app.js',
path:__dirname + '../../public/javascripts/'
},
devServer:{
inline:false
}
};
------------------folder structure-------------
|react
|node modules
|components
|App.js
|app
|index.js
Everything works fine but when I am execting the app in browser I get the react error and gives a link which displays the following.
"Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object."

You're mixing up require, and import / export.
Since you're running webpack, all of your React code (and anything that gets transpiled by babel via webpack) should stick to using import/export. require should only be used in places like js that's directly run by node.
In your index.js, change all the requires to imports and see if that helps.

In the file index.js, you should change your code like this:
var App = require('../components/App').default;
or use import
import App from '../components/App';
I recommend using a unified usage. You can import/export or module.exports/require.

Warning: React.createElement: type is invalid -- expected a string

I'm a complete beginner at web development + react, and am running
into a problem as I try to render an imported component.
I'm trying to render the following component: https://www.npmjs.com/package/react-launch-gauge
However, when i run, i keep getting the following error:
> Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
What am I doing wrong? My code is below
App.jsx
import React from 'react';
import Gauge from 'react-launch-gauge';
class App extends React.Component {
constructor(props, context) {
super(props, context)
}
render() {
return (
<div>
<Gauge title={'Points'} value={42} max={100} />
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
package.json
{
"name": "iw",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-launch-gauge": "^0.2.3",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}

I believe you'd need to supply constructor to properly initialize App Component, like so:
App.jsx
import React from 'react';
import Gauge from 'react-launch-gauge';
class App extends React.Component {
constructor(props, context) {
super(props, context)
}
render() {
return (
<div>
<Gauge title={'Points'} value={42} max={100} />
</div>
);
}
}
export default App;

I have meet same problem like you, this reason is that Gauge has not defined.
so you must definde it with basic structure and export it , you will solve it
and like this

React-Router cannot read property string of undefined

I am new to React and I am building my first application with React, Redux, and React Router, so far I have successfully set up my boiler plate, however when I want to use React-Router and create routes I get the following error
TypeError: Cannot read property 'string' of undefined
./node_modules/react-router-dom/es/BrowserRouter.js
node_modules/react-router-dom/es/BrowserRouter.js:38
35 | }(React.Component);
36 |
37 | BrowserRouter.propTypes = {
> 38 | basename: PropTypes.string,
39 | forceRefresh: PropTypes.bool,
40 | getUserConfirmation: PropTypes.func,
41 | keyLength: PropTypes.number,
This only happens when I try to import and use
import { BrowserRouter, Route } from 'react-router-dom';
Here is my index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store'
import { BrowserRouter, Route } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
class Hello extends Component {
render(){
return(
<div>Hello</div>
)
}
}
class GoodBye extends Component {
render(){
return(
<div>GoodBye</div>
)
}
}
ReactDOM.render(<Provider store={store}>
<BrowserRouter>
<Route path="/hello" component={Hello}/>
<Route path="/goodbye" component={GoodBye}/>
</BrowserRouter>
</Provider>, document.getElementById('root'));
registerServiceWorker();
And my package.json
{
"name": "reactreduxrouterblog",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^2.0.0-rc5",
"react-router-dom": "^4.0.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^4.4.1",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Any knowledge will be welcomed thanks!

Update your react-router-dom in package.json: react-router-dom ^4.2.2

Sometimes it may cause due to incompatible versions of "react-router-dom" and "react-router-prop-types". For me it worked with following configuration.
react-router-dom:"^4.2.2",
react-router-prop-type:"^3.2.1"

Try adding the PropTypes package to your app.
basename: PropTypes.string
Looks like you are just missing that package.
EDIT:
Be sure to run npm install to install all dependencies.

import React from 'react'; <--as normal
import PropTypes from 'prop-types'; <--add this as a second line
App.propTypes = {
monkey: PropTypes.string, <--omit "React."
cat: PropTypes.number.isRequired <--omit "React."
};
//Wrong: React.PropTypes.string
//Right: PropTypes.string

react-router-dom is not working with console error

Here is my entry file
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
class Hello extends React.Component {
render () {
return <div>Hello!</div>
}
}
class Goodbye extends React.Component {
render () {
return <div>Goodbye!</div>
}
}
ReactDOM.render(
<BrowserRouter>
<div>
<Route path="/hello" component={Hello} />
<Route path="/goodbye" component={Goodbye} />
</div>
</BrowserRouter>,
document.getElementById('app')
)
Here is my dependency file
package.json
{
"name": "React-Router-Redux",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
},
"keywords": [],
"author": "Manoj Kumar",
"license": "ISC",
"dependencies": {
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
}
}
When I go http://localhost:8081/hello or http://localhost:8081/goodbye, it renders Cannot GET /hello or Cannot GET /goodbye with this console error
GET http://localhost:8081/hello 404 (Not Found)
or
GET http://localhost:8081/hello 404 (Not Found)
I use react-router-dom^4.1.2, react^15.6.1. I could not solve this please help me.
Thank You

This looks like a Webpack issue. Try adding the line
historyApiFallback: true
to the devServer block of your webpack.config.js. This will redirect the 404s back to /index.html where they should be properly routed by index.js.
Here's a thread discussing an issue similar to yours.