电子。懒惰的元素类型必须解析为一个类或函数(在生产模式下)

Question

我想用电子和反应来做一个桌面应用。但是当我使用 React.lazy() 行不通 在生产中 当我打包应用程序时，它只显示一个空的屏幕（在开发模式下，它总是工作正常）。

这里有一个错误。

Element type is invalid. 收到的承诺解析为: function(){return l.a.createElement("div",null,l.a.createElement("h1",null, "简单组件"))}。懒惰的元素类型必须解析为一个类或函数。

我读了很多文章，但还是没能成功。我尝试了不同的webpack配置，electron-packager，electron-builder，bozon--但没有任何帮助使它与懒惰工作。

我仍然可以在不使用 lazy() 但想弄清楚到底是什么问题。lazy() 的方法。

对于这种情况，我在github创建了一个简单的仓库(电子懒人回收)，让你更容易找到所有可用的信息。

SimpleComponent.js

import React from 'react'

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

export default SimpleComponent

和 "简单组件"（SimpleComponent.js）。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使其工作？

你认为我必须使用经典导入而不使用lazy()吗？

Answer 1

对我来说问题是，问题在于 babel-minify-webpack-plugin 我用它来最小化我的代码。去掉它似乎就能解决我的isse问题。我的猜测是，他们将函数定义保存为字符串以节省空间，并在其逻辑中的某个地方使用eval。但这只是我的猜测。也许它也能帮你解决这个问题？

总之，这个 babel-minify-webpack-plugin的Github页面。 说它已被废弃，所以我最终从我的项目中删除了它，并使用了 terser-webpack-plugin 而不是。现在一切似乎都能正常工作，构建时间也大大缩短。我的建议是，避免使用 babel-minify-webpack-plugin 并使用其他的迷你化插件代替