如何使用电子反应样板正确设置Material-UI [英] How to properly set up material-ui with electron-react-boilerplate

问题描述

我在使用带有电子反应样板的material-ui（v4.9.5）库中遇到问题。
复制：

I'm having issues with material-ui (v4.9.5) library running with electron-react-boilerplate. To reproduce:

1. 按照安装教程


2. yarn add @ material-ui / core


3. 从库中添加一些小部件：

diff --git a/app/components/Home.tsx b/app/components/Home.tsx
index 20748ab..f4f9a21 100644
--- a/app/components/Home.tsx
+++ b/app/components/Home.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Button } from '@material-ui/core';
 import routes from '../constants/routes.json';
 import styles from './Home.css';

 export default function Home() {
   return (
     <div className={styles.container} data-tid="container">
+      <Button>Hello</Button>
       <h2>Home</h2>
       <Link to={routes.COUNTER}>to Counter</Link>
     </div>

现在，当您运行 yarn dev 。但是，纱线开始会产生：

Now everything works great when you run yarn dev. However, yarn start produces:

init.ts:204 Unable to load preload script: /home/vasniktel/boiler-test/app/dist/renderer.prod.js
(anonymous) @ init.ts:204
init.ts:205 TypeError: Cannot use 'in' operator to search for 'ontouchstart' in null
    at Module../app/index.tsx (/home/vasniktel/boiler-test/app/dist/renderer.prod.js:2)
    at n (/home/vasniktel/boiler-test/app/dist/renderer.prod.js:2)
    at module.exports../app/app.global.css (/home/vasniktel/boiler-test/app/dist/renderer.prod.js:2)
    at Object.<anonymous> (/home/vasniktel/boiler-test/app/dist/renderer.prod.js:2)
    at Object.<anonymous> (/home/vasniktel/boiler-test/app/dist/renderer.prod.js:3)
    at Module._compile (internal/modules/cjs/loader.js:880)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:892)
    at Module.load (internal/modules/cjs/loader.js:735)
    at Module._load (internal/modules/cjs/loader.js:648)
    at Module._load (electron/js2c/asar.js:717)
(anonymous) @ init.ts:205

有什么方法可以解决此问题？

Is there any way to fix this?

推荐答案

看来，从 main.dev.ts 文件中删除这些行可以解决问题：

It seems that removal of these lines from the main.dev.ts file solves the problem:

@@ -58,14 +58,9 @@ const createWindow = async () => {
     show: false,
     width: 1024,
     height: 728,
-    webPreferences:
-      process.env.NODE_ENV === 'development' || process.env.E2E_BUILD === 'true'
-        ? {
-            nodeIntegration: true
-          }
-        : {
-            preload: path.join(__dirname, 'dist/renderer.prod.js')
-          }
+    webPreferences: {
+      nodeIntegration: true
+    }
   });

这篇关于如何使用电子反应样板正确设置Material-UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！