使用 Electron + React 运行 BluePrintJS 时出错

问题描述

我所有的源代码都在这里供参考：

https://github.com/xkenneth/electron-react-blueprint-bp

我使用 Electron forge TypeScript + Webpack 模板构建了一个不错的样板

https://www.electronforge.io/templates/typescript-+-webpack-template

然后跟随

https://www.electronforge.io/guides/framework-integration/react-with-typescript

现在我正在尝试为用户界面加载 BluePrintJS

当我运行我的代码时，我收到以下错误：

index.js:2393 Uncaught ReferenceError: process is not defined

我按照此处的说明操作但无济于事..

Webpack: Bundle.js - Uncaught ReferenceError: process is not defined

有什么想法吗？

这是我的 app.jsx

import { Divider } from '@blueprintjs/core';


console.log('Importing react.')

import * as React from 'react';
import * as ReactDOM from 'react-dom';

console.log('Importing BluePrint')

import { Button,Intent,Spinner } from "@blueprintjs/core";

function App () {
    return (<div>
                <div>Well,just go $#@! yourself!</div>
                <div><Button></Button></div>
            </div>
            )
}

function render() {
  ReactDOM.render(<App/>,document.getElementById("root"));
}

render();

这是我的 web pack.main.config.js（我假设这个样板文件使用 web pack.main.config.js 因为我找不到 web pack.config.js

const webpack = require('webpack')

module.exports = {
  /**
   * This is the main entry point for your application,it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',// Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),},resolve: {
    extensions: ['.js','.ts','.jsx','.tsx','.css','.json'],alias: {
        process: "process/browser"
    },plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development')
    })
],};

解决方法

我将这行代码添加到 src/renderer.ts 的顶部，效果很好！

window.process = { env: {} } as NodeJS.Process;