未捕获的 ReferenceError：全局未在 Object../node_modules/fbjs/lib/setImmediate.js 中定义

Posted 2023-03-13

【中文标题】未捕获的 ReferenceError：全局未在 Object../node_modules/fbjs/lib/setImmediate.js 中定义

【英文标题】：Uncaught ReferenceError: global is not defined at Object../node_modules/fbjs/lib/setImmediate.js

【发布时间】：2020-03-15 02:27:02

【问题描述】：

当我尝试在我的 Electron 项目中从 ant 设计中渲染 Button 时，我遇到了这个错误，但它什么也没渲染。当我从按钮更改为只是 Hello World 文本时，它可以工作。

我不确定错误是来自 webpack 还是 ant 设计本身。

注意：这个项目是我自己手动创建的，但是https://github.com/Devtography/electron-react-typescript-webpack-boilerplate上可以重现错误，https://github.com/Robinfr/electron-react-typescript上没有错误

错误信息

Uncaught ReferenceError: global is not defined
    at Object../node_modules/fbjs/lib/setImmediate.js (renderer.js:58171)
    at __webpack_require__ (renderer.js:20)
    at Object../node_modules/draft-js/lib/editOnBeforeInput.js (renderer.js:49367)
    at __webpack_require__ (renderer.js:20)
    at Object../node_modules/draft-js/lib/DraftEditorEditHandler.js (renderer.js:45296)
    at __webpack_require__ (renderer.js:20)
    at Object../node_modules/draft-js/lib/DraftEditor.react.js (renderer.js:44011)
    at __webpack_require__ (renderer.js:20)
    at Object../node_modules/draft-js/lib/Draft.js (renderer.js:43920)
    at __webpack_require__ (renderer.js:20)

webpack.config.js

const path = require("path");

const config = 
  target: "electron-main",
  devtool: "source-map",
  entry: "./src/main.ts",
  output: 
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  ,
  module: 
    rules: [
      
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader"
        
      
    ]
  ,
  resolve: 
    extensions: [".ts", ".tsx", ".js"]
  ,
  node: 
    __dirname: false,
    __filename: false
  
;

module.exports = (env, argv) => 
  return config;
;

webpack.react.config.js

const path = require("path");
const htmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin(
  template: "./src/index.html",
  filename: "./index.html"
);

const config = 
  target: "electron-renderer",
  devtool: "source-map",
  entry: "./src/app/renderer.tsx",
  output: 
    filename: "renderer.js",
    path: path.resolve(__dirname, "dist")
  ,
  module: 
    rules: [
      
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader"
        
      ,
      
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      
    ]
  ,
  resolve: 
    extensions: [".ts", ".tsx", ".js"]
  ,
  plugins: [htmlPlugin]
;

module.exports = (env, argv) => 
  return config;
;

【问题讨论】：

任何可行的解决方案？

【参考方案1】：

这与https://github.com/facebook/fbjs/issues/290有关。

通过在window 上添加global 对象来修复它：

(window as any).global = window;

【参考方案2】：

只是为提供的答案添加一些上下文，将其添加到您的 index.html 文件中（在标记内）：

<script>
  const global = globalThis;
</script>

【参考方案3】：

有同样的问题，我在执行任何脚本之前做了什么：

global = globalThis;