Electron：惰性元素類型必須解析為 class 或 function（在生產模式下）

Question

我正在嘗試使用 electron 制作桌面應用程序並做出反應。 但是當我使用React.lazy()時，當我使用 package 應用程序時它在生產模式下不起作用並且它只顯示一個空屏幕（在開發模式下它總是可以正常工作）

這是一個錯誤：

元素類型無效。 收到一個 promise 解析為： function(){return lacreateElement("div",null,lacreateElement("h1",null,"Component)}。 惰性元素類型必須解析為 class 或 function。

我閱讀了很多文章，但仍然沒有成功。 我嘗試了不同的 webpack 配置，電子包裝器，電子制造商，bozon - 但沒有任何幫助使它與懶惰一起工作。

我仍然可以在不使用lazy()的情況下使其工作，但想弄清楚lazy()方法有什么問題。

對於這種情況，我在 github ( Electron Lazy Repo ) 創建了一個簡單的存儲庫，以便您更輕松地找到所有可用信息。

簡單組件.js

import React from 'react'

const SimpleComponent = () => {
    return (
        <div>
            <h1>Simple Component</h1>
        </div>
    )
}

export default SimpleComponent

和App.js

 import React from 'react'

//import SimpleComponent from './SimpleComponent';
const SimpleComponent = React.lazy(() => import('./SimpleComponent'));

const loading = (
    <div className="pt-3 text-center">
      <div className="sk-spinner sk-spinner-pulse"></div>
    </div>
  )  

const App = () => {
    return (
        <div className='app'>
            <React.Suspense fallback={loading}>
                <SimpleComponent/>
            </React.Suspense>
        </div>
    )
}

export default App

所以如果確實import SimpleComponent from './SimpleComponent'; 它有效，如果const SimpleComponent = React.lazy(() => import('./SimpleComponent')); - 它在生產模式下顯示空白屏幕。

您能否建議可能出了什么問題以及如何使用惰性使其工作？

你認為我必須使用沒有lazy() 的經典導入嗎？

Answer 1

對我來說，問題在於我用來縮小代碼的babel-minify-webpack-plugin 。 刪除似乎解決了我的問題。 我的猜測是，他們將 function 定義保存為字符串以節省空間，並在其邏輯中的某處使用 eval 。 但這只是我的猜測。 也許它也會為你解決它？

無論如何， babel-minify-webpack-plugin 的 Github 頁面說它已被棄用，所以我最終從我的項目中刪除了它，並改用了terser-webpack-plugin 。 現在似乎一切正常，構建時間也顯着減少。 我的建議是，避免使用babel-minify-webpack-plugin並改用其他一些縮小插件