领域与电子反应?兼容-集成时出错

Question

你好，我正在尝试将领域集成到我的电子反应应用程序中以保存数据，我很抱歉，因为我是新来的，我不知道我的问题是否表达得很好，但我请求您的帮助。

我正在将领域集成到我的电子反应应用程序中，就像领域文档所说的https://docs.mongodb.com/realm/sdk/node/integrations/electron-cra/#std-label-node-electron-cra -client-quick-start

当我运行应用程序时，我在控制台中得到以下错误：

Uncaught ReferenceError: require is not defined
    at Object.<anonymous> (external "react":1)
    at l (index.html:1)
    at Module.<anonymous> (main.7f1bb50c.chunk.js:1)
    at l (index.html:1)
    at r (index.html:1)
    at Array.t [as push] (index.html:1)
    at main.7f1bb50c.chunk.js:1

它应该向我展示旋转的反应标志，但它没有

​

我的public/electron.js

const path = require('path');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: true },
  });
  // and load the index.html of the app.
  console.log(__dirname);
  mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

我的craco.config.js

module.exports = {
  webpack: {
    configure: {
      target: 'electron-renderer',
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/, 'electron-devtools-installer'],
        }),
      ],
    },
  },
};

我的package.json

  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "build": "craco build",
    "start": "electron .",
  },

"build": "craco build"命令创建了一些我不会分享的文件，因为它们非常大，我非常感谢任何帮助的朋友

Answer 1

我完全按照Realm教程中的步骤操作，并且启动模板没有任何问题。仔细检查你的package.json homepage和main字段？无论如何，我记得我看到过一个类似的错误，但那是在我使用带有typescript + react模板的electron-forge init时发生的。不知道怎么解决这个问题。

当我开始在Realm教程中使用React钩子时，我遇到了另一个问题，因为我觉得它可能是常见的错误，所以我将在这里添加我的解决方案。我得到的错误是：

Uncaught Error: Must use import to load ES Module: /mnt/bla/test2/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
require() of ES modules is not supported.

为了解决这个问题，我研究了craco是如何工作的，并更改了craco文件的外部字段，如下所示：

externals: [
    nodeExternals({
        allowlist: [/babel(\/.*)?/],
    }),
],

nodeExternals列出了节点模块中的所有文件，减去了allowlist列出的所有白名单。Webpack采用了这个列表，并将它们从捆绑中排除(即强制代码需要这些文件)。由于错误表明它不能需要babel文件，我认为导入它可能会起作用，所以我让babel捆绑了babel模块，问题就解决了。我不知道这与react钩子的使用有什么关系。