FEBOOK

Appearance

Return to top
On this page

问题篇-常见问题解决

常见问题的解决

如果您在边阅读边实践时，发现代码报错或者 TS 报错，那么小伙伴们可以根据报错信息，去线上看看相应的代码。

Q1: Uncaught ReferenceError: require is not defined

如果出现上述报错，请检查你是否在主进程中添加这行代码

javascript
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    // 👇 请确保添加此配置
    nodeIntegration: true,
  },
});

如果添加了，并且重跑 npm run start:main 之后仍还是此问题，那么请确保你搭建项目的 Electron 与本应用的版本一致(当前项目的 Electron@11.1.1)

请自检查一下你的版本是否正确，进入 node_modules/electron/package.json ，查看 version 是否是 11.1.1。

如果版本不正确，请重装 electron@11.1.1 版本。在确保 Electron 版本正确的情况下，重新运行一下本地开发脚本。

npm run start:render
npm run start:main

如果你就是想要高版本，比如 v13版本之上，那么你需要将配置改为：

javascript
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    // 👇 请确保添加此配置
    nodeIntegration: true,
    contextIsolation: false
  },
});

image.png

感兴趣的可前往官网-上下文隔离 、官网-为远程内容开启上下文隔离、或者github查看更新说明

题外话：有小伙伴说，为什么我 React 起的 dev-server，在 Chrome 浏览器里访问 http://127.0.0.1:7001 看不到页面效果，但是在 Electron 应用中就看到页面效果。

原因在于我们的 target 配置，大家可以通过 webpack target 官网配置看到相关说明

image.png

你可以做个尝试，你终止 Electron 应用的运行，然后进入 webpack.render.dev.js 文件中，将 target 属性设置为默认的 web，然后运行 npm run start:render

这里我只是让小伙伴们做个尝试，你尝试完之后，代码还是要还原到之前的配置，你这里只是尝试，尝试啊，并不是让你真的去改配置

此时我们去 Chrome 浏览器访问一下 http://127.0.0.1:7001，这时候就能正常看到页面效果了。

请注意，这里我采用的是 init-cli 分支进行演示。如果你将 target 改成 web 之后不能访问，说明你的 react 代码中用到了 Node 的一些特性（比如你在 React 代码中用到了 fs 模块、path 模块等），而浏览器是不知道 Node 是什么东西的。

之所以 init-cli 分支代码可行，是因为此时的 React 中没有涉及 Node 相关代码。所以我们能够在 Chrome 中看到效果展示，那么为什么能在 Electron 中能看到效果呢？因为 Electron 内置了 NodeJS，为此我们对应将 target 改成了 electron-renderer，看上面文档有说明。

image.png

Q2: 图片 icon 并未正确显示，background: url([object Module])

如果出现这个问题，可以参考：webpack 4 gives background: url([object Module]) as bg image

解决方案就是在 webpack.base.js 文件中，对 file-loader 的 options 添加 esModule 配置

javascript
module: {
  rules: [
    {
      test: /\.(jpg|png|jpeg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            esModule: false
          },
        },
      ],
    },
  ],
}

Q3: 文件部分类型 TS 报红

如果你引入 png、jpeg 类型文件，或者是 less 文件，导致 TS 报错（红色波浪线），说找不到模块，实际上我们的路径是正确的，项目能够正常运行。

如果去掉这膈应人的红色波浪线呢？进入到 global.d.ts，进行类型声明。

ts
// png 类型声明
declare module '*.png' {
  const png: string;
  export default png;
}

// svg 类型声明
declare module '*.svg';

// png 类型声明
declare module '*.less';

// rc-redux-model 类型声明
declare module 'rc-redux-model';

后台有位小伙伴提出一个很好的问题：为什么需要单独在 global.d.ts 里写类型声明，像在 webpack 的 resolve 的 extensions 中支持 .less、.png 不行吗？还真不行，至于为什么，小伙伴们可以查看这篇文章

Q4: Uncaught ReferenceError: global is not defined

如果出现上述报错，那么可能是你 babel 相关配置配置的问题（可以检查一下版本或者配置是否与小册一致），说实在话，小编目前未遇到此问题，暂时无法复现去定位，目前在 webpack 的官方 issues 也有找到相关的资料。

最后

小伙伴们一定要进群！在群里面交流才是最快解决问题的方案，记住，彭于晏与你们同在。

👇 下面是进群的方式

image.png