Electron- access process.env

[n00el]

Why only functional React components are rendered?

Old class components just dosen't show up.

[codesbiome]

@n00el, Can you provide any source code to reproduce the issue? Because the class component works just fine. Recently tried this and it renders the same result without any issue :

(Converted the default Application functional component to class component)

// Application.tsx

import React from 'react';
import { hot } from 'react-hot-loader';
import logo from '@assets/images/logo.png';
import './Application.less';

type AppProps = {
  title: string;
  version: string;
};

type AppState = {
  counter: number;
};

class Application extends React.Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props);
    this.state = {
      counter: 0,
    };
  }

  render() {
    const { counter } = this.state;
    return (
      <React.Fragment>
        <main>
          <div className='main-heading'>
            <h1>{this.props.title}</h1>
          </div>
          <div className='main-teaser'>
            <img src={logo} title='Codesbiome' />
            <div>
              Minimal boilerplate for rapid development of Desktop Applications.
              <br />
              This project makes use of Electron, React, Typescript, Webpack to
              serve the best environment for development with hot-reloading of
              modules and styles.
            </div>
          </div>
          <div className='versions center'>
            <span>
              ERWT <span id='erwt-version'></span>
            </span>
            <span>
              Electron <span id='electron-version'></span>
            </span>
            <span>
              Chrome <span id='chrome-version'></span>
            </span>
            <span>
              Node <span id='node-version'></span>
            </span>
          </div>
          <p className='main-teaser small center'>
            Click below button(s) to update the application &quot;counter&quot;
            state. For faster development experience, this application will
            update using Hot Reload without needing to restart/reload after code
            changes
          </p>
          <div className='center'>
            <button onClick={() => this.setState({ counter: counter + 1 })}>
              Increment Counter <span>{counter}</span>
            </button>
            &nbsp;&nbsp; &nbsp;&nbsp;
            <button
              onClick={() =>
                this.setState({ counter: counter > 0 ? counter - 1 : 0 })
              }
            >
              Decrement Counter <span>{counter}</span>
            </button>
          </div>
        </main>
      </React.Fragment>
    );
  }
}

export default hot(module)(Application);

[n00el]

Thanks for the fast reply! Intresting, its working for me too.

Maybe I found the problem: I use blueprintjs in my code. After I add any of its elements to the code, its stop working.

Its only rendering the div with the "app" id, and nothing else in it.

[codesbiome]

Maybe I found the problem: I use blueprintjs in my code. After I add any of its elements to the code, its stop working.

If you can create a test repo based on this boilerplate, that'd be easier to look into.

Its only rendering the div with the "app" id, and nothing else in it.

The div id app is already used inside template index.html to render the React application.

// Render application in DOM
ReactDOM.render(app, document.getElementById('app'));

Not sure if you're creating a new element for the ReactDOM rendering?

[n00el]

Yeah, I will give it a try and post it! Meanwhile, I found an error in the console. Looks like the blueprintjs pacakge wants to check some process.env varibles

Uncaught ReferenceError: process is not defined

[codesbiome]

Looks like the blueprintjs pacakge wants to check some process.env varibles

By default, the BrowserWindow configuration is set to have isolation for untrusted content.

Try to set this value when creating your BrowserWindow in main.ts:

webPreferences: { nodeIntegration: true, contextIsolation: false }

[n00el]

Its working now with the following settings:

Question: will it break anything if I change to the following ones? webPreferences: { ...., nodeIntegration: true, contextIsolation: false },

[n00el]

Thanks for the help, it's working now! Yeah, if you want to access the process.env, you need to have this settings, good to know! Have a nice day!

[codesbiome]

Question: will it break anything if I change to the following ones?

Should be fine. Its used for security purposes as per electron documentation, they advise separating the context of main and renderer process to avoid any untrusted security issues.

Cheers!