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并改用其他一些缩小插件