我是否正確使用withTracker？ 我收到與進口/出口有關的錯誤，但無法找出問題

Question

因此，我將一個舊項目升級到react的更新版本，並決定用withTracker方法替換流星反應數據的createContainer。 我相信語法正確無誤，但出現錯誤，似乎與我無法正確導入或導出有關。

我嘗試了多種不同的導出和導入組合，但是似乎沒有任何效果，因此我不確定是否只是在犯一個愚蠢的錯誤。

SurveysPage文件

import React from "react";
import { Meteor } from "meteor/meteor";
import { withTracker } from "meteor/react-meteor-data";
import { Helmet } from "react-helmet";
import orderBy from "lodash/orderBy";
import includes from "lodash/includes";
import capitalize from "lodash/capitalize";
import Folders from "/imports/api/folders/folders";
import Survey, { SurveysWithFirstResponse } from "/imports/api/surveys/surveys";
import SurveysList from "./surveys-list";
import Header from "/imports/ui/layouts/header";
import Main from "/imports/ui/layouts/main";
import Loader from "/imports/ui/loader";

export class SurveysPage extends React.Component {
    -- SurveysPage code
    }
}

const SurveysPageContainer = withTracker((props) => {
    const subs = [
        Meteor.subscribe("folders"),
        Meteor.subscribe("all-surveys"),
        Meteor.subscribe("surveys-with-first-response")
    ];

    const loading = subs.some((sub) => !sub.ready());
    const folders = Folders.find().fetch();
    const surveys = Survey.find({}, { sort: { createdAt: -1 } }).fetch();
    const surveysWithFirstResponse = SurveysWithFirstResponse.find().fetch();

    let detailedFolders = [];
    // TODO (mix) refactor the surveys-with-first-response publication to do this join
    if (!loading) {
        detailedFolders = folders.map((folder) => {
            const surveysInFolder = surveys.filter((s) =>
                includes(folder.surveys, s.origin.id)
            );
            const decoratedSurveys = surveysInFolder.map((s) => {
                const surveyObj = surveysWithFirstResponse.find(
                    (surveyObj) => surveyObj.originId === s.origin.id
                );
                if (surveyObj && surveyObj.responseId)
                    s.responseId = surveyObj.responseId;
                return s;
            });

            const contents = orderBy(decoratedSurveys, "title");

            return Object.assign({}, folder, { contents });
        });
    }

    return { loading, folders: detailedFolders, surveys };
})(SurveysPage);

export default SurveysPageContainer;

Routes.jsx文件

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import BasicLayout from "./layouts/basic-layout";
import SurveysPageContainer from "/imports/ui/surveys/surveys-page";
import ResponsesPage from "/imports/ui/responses/responses-page";
import ResponsePage from "/imports/ui/response/response-page";
import AssignmentPage from "/imports/ui/assignment/assignment-page";
import { createBrowserHistory } from "history";

const browserHistory = createBrowserHistory();

const Routes = () => {
    return (
        <Router history={browserHistory}>
            <Route path="/" component={BasicLayout} />
            <Switch>
                <Route exact path="/" component={SurveysPageContainer} />
                <Route path="survey/:surveyId" component={ResponsesPage} />
                <Route path="survey/:surveyId/assignment" component={AssignmentPage} />
                <Route
                    path="/survey/:surveyId/response/:responseId"
                    component={ResponsePage}
                />
            </Switch>
        </Router>
    );
};

export default Routes;

錯誤如下：

backend.js:6 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    in Unknown (created by SurveysPage)
    in div (created by SurveysPage)
    in SurveysPage (created by ReactMeteorDataComponent)
    in ReactMeteorDataComponent (created by Context.Consumer)
    in Route (created by Routes)
    in Switch (created by Routes)
    in Router (created by Routes)
    in Routes
    in div

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:28717:34
    at createFiberFromTypeAndProps (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:28720:13)
    at createFiberFromElement (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:28741:15)
    at createChild (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:18691:28)
    at reconcileChildrenArray (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:18942:25)
    at reconcileChildFibers (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:19279:14)
    at reconcileChildren (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:21372:28)
    at updateHostComponent (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:21851:3)
    at beginWork$1 (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:23191:14)
    at HTMLUnknownElement.callCallback (http://localhost:3000/packages/modules.js?hash=95dbfaa7286d1ad0d61289dcea7b3a5605866b43:5028:14)

backend.js:6 The above error occurred in the <div> component:
    in div
    in Unknown (created by SurveysPage)
    in div (created by SurveysPage)
    in SurveysPage (created by ReactMeteorDataComponent)
    in ReactMeteorDataComponent (created by Context.Consumer)
    in Route (created by Routes)
    in Switch (created by Routes)
    in Router (created by Routes)
    in Routes
    in div

我懷疑問題是由於SurveysPage文件上的withTracker導出或Routes文件上的導入引起的。

任何幫助將不勝感激。

Answer 1

修復：問題來自於從React-Router導入，而不是Header組件中的react-router-dom。