Question

我正在运行一个React应用，我想使用React.lazy添加基于路由的代码拆分。

当前我的代码是

mFirestore.collection("Cities").addSnapshotListener(new EventListener<QuerySnapshot>() {
            @Override
            public void onEvent(@javax.annotation.Nullable QuerySnapshot documentSnapshots, @javax.annotation.Nullable FirebaseFirestoreException e) {
                if (e != null) {
                }

                assert documentSnapshots != null;


                for (DocumentChange doc : documentSnapshots.getDocumentChanges()) {

                    if (doc.getType() == DocumentChange.Type.ADDED) {
                        String doc_id = doc.getDocument().getId();
                        Cities city = doc.getDocument().toObject(Cities.class).withDocId(doc_id);
                        cities.add(doc.getNewIndex(), city);
                        citiesAdapter.notifyDataSetChanged();

                    } else if (doc.getType() == DocumentChange.Type.MODIFIED) {
                        String docID = doc.getDocument().getId();
                        Cities changedModel = doc.getDocument().toObject(Cities.class).withDocId(docID);
                        if (doc.getOldIndex() == doc.getNewIndex()) {
                            // Item changed but remained in same position
                            cities.set(doc.getOldIndex(), changedModel);
                            citiesAdapter.notifyItemChanged(doc.getOldIndex());
                        } else {
                            // Item changed and changed position
                            cities.remove(doc.getOldIndex());
                            cities.add(doc.getNewIndex(), changedModel);
                            citiesAdapter.notifyItemMoved(doc.getOldIndex(), doc.getNewIndex());
                        }
                    } else if (doc.getType() == DocumentChange.Type.REMOVED) {
                        // remove
                        cities.remove(doc.getOldIndex());
                        citiesAdapter.notifyItemRemoved(doc.getOldIndex());
                    }
                }
            }
        });

在这里仅提及使其紧凑的相关部分。

现在的问题是，在webpack-dev-server中，它可以完美运行，但是当我运行npm run build并转到import { PureComponent, cloneElement, Suspense, lazy } from 'react'; ... export const CartPage = lazy(() => import(/* webpackMode: "lazy", webpackPrefetch: true */ 'Route/CartPage')); ... <Suspense fallback={ this.renderFallbackPage() }> <NoMatchHandler> <Switch> ... <Route path="/cart" exact component={ CartPage } /> ... </Switch> </NoMatchHandler> </Suspense>时，代码将中断。遵循link mentioned for the error之后，这是消息

/cart

我已经做了一些常见的故障排除

在Element type is invalid. Received a promise that resolves to: function i(e){var r;return r=t.call(this,e)||this,T()(y?!e.wrapperProps[d]:!e[d],"Passing redux store in props has been removed and does not do anything. "+P),r.selectDerivedProps=n(),r.selectChildElement=function(){var t,e,n,r;return function(i,o,a){return(o!==t||a!==e||r!==i)&&(t=o,e=a,r=i,n=m.a.createElement(i,Object(O.a) ({},o,{ref:a}))),n}} (),r.indirectRenderWrappedComponent=r.indirectRenderWrappedComponent.bind(function(t) {if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(r)),r}. Lazy element type must resolve to a class or function.组件中，我完成了CartPage
实际版本为export default connect(mapStateToProps, mapDispatchToProps)(CartPage);

最奇怪的部分是16.13.1。是功能！但是随后它抱怨Received a promise that resolves to: function...。对我来说没有任何意义。

有什么问题吗？

编辑

Lazy element type must resolve to a class or function具有以下内容

Route/CartPage/index.js

我故意使它尽可能简单。但是仍然出现相同的错误。但是具有不同的参数。现在错误是this

import { PureComponent } from 'react';

export default class CartPage extends PureComponent {
     render() {
         return <h1>Test</h1>;
     }
}

编辑2

我从Element type is invalid. Received a promise that resolves to: function t(){return c()(this,t),r.apply(this,arguments)}. Lazy element type must resolve to a class or function.中删除了以下几行。它开始工作了！还是不知道为什么

webpack.config.js

Answer 1

就像我在问题中提到的那样，babel-minify-webpack-plugin由于某种原因导致了问题。我的猜测是，他们将函数定义另存为字符串以节省空间，并在其逻辑内部使用eval。但这只是我的猜测。

无论如何，Github page for babel-minify-webpack-plugin说它已被弃用，所以我最终从项目中删除了它，而改用terser-webpack-plugin。现在一切似乎都可以正常工作，并且构建时间也大大减少了。我的建议是，避免使用babel-minify-webpack-plugin，而改用其他缩小插件

React.lazy无法在生产模式下工作

1 个答案: