ProviderFunction 沒有導出我的新函數

Question

我的問題：我希望我的FirebaseProvider function 通過應用程序提供包含所有功能的 object。 問題是所有功能都通過我的文件很好地提供，除了我最后一個新的 function: fetchTest 。

說明：如果我單擊TestPage.js按鈕，我會收到Uncaught TypeError: fetchTest is not a function 。
我在 stackoverflow 上看到很多關於此類錯誤的帖子，但沒有一個對我有幫助。 -> 我認為原來的問題是index.js沒有被調用。 console.log("firebaseprovider") （在index.js中）不會出現在控制台中，但web-app/src/views/中項目的其他文件與TestPage具有相同的導入和導出。

由於App.js代碼在所有其他文件上運行良好，我不知道console.log("firebaseprovider")是如何永遠不會顯示在導航器控制台中的。 （編輯：無論我在哪個頁面 go，這個console.log都不會出現）
<FirebaseProvider>似乎不提供TestPage.js 。 你有想法嗎？

我試過的：

• 在TestPage.js中放置一個console.log ：它顯示每個 function 寫在index.js但不是fetchTest 。 它似乎無法通過api object 正確導出。
• 在TestPage.js中嘗試console.log("api.fetchTest") ：控制台顯示undefined 。
• 在index.js中添加第二個測試 function ，沒有參數，它只是執行console.log("test")
• 將imports / exports和api聲明與web-app/src/views/中的其他文件進行比較
• 在TestPage.js中創建一個handleSubmit() function 以不將函數直接return
• 刪除node_modules然后yarn install
• yarn workspace web-app build然后重新啟動yarn workspace web-app start

（這是一個包含common/和web-app/文件夾的 Yarn Workspaces 項目）

common/src/ index.js ：

import React, { createContext } from 'react';
import {FirebaseConfig} from 'config';

const FirebaseContext = createContext(null);
const FirebaseProvider  = ({ children }) => {
    console.log("firebaseprovider");  // is not displayed in the console
    let firebase = { app: null, database: null, auth: null, storage:null }

    if (!app.apps.length) {  // I tried to comment out this line (and the '}') -> no difference
        app.initializeApp(FirebaseConfig);  // no difference when commented out
        firebase = {
            app: app,
            database: app.database(),
            auth: app.auth(),
            storage: app.storage(),
            // [ ... ] other lines of similar code
            api : {  // here are functions to import
              fetchUser: () => (dispatch) => fetchUser()(dispatch)(firebase),
              addProfile: (details) => (dispatch) => addProfile(userDetails)(dispatch)(firebase),
              // [ ... ] other functions, properly exported and working in other files
              // My function :
              fetchTest: (testData) => (dispatch) => fetchTest(testData)(dispatch)(firebase),
            }
        }
    }
    return (
        <FirebaseContext.Provider value={firebase}>
            {children}
        </FirebaseContext.Provider>
    )
}
export { FirebaseContext, FirebaseProvider, store }

web-app/src/views/ TestPage.js ：

import React, { useContext } from "react";
import { useDispatch } from "react-redux";
import { FirebaseContext } from "common";

const TestPage.js = () => {
  const { api } = useContext(FirebaseContext);
  console.log(api);  // Displays all functions in api object, but not fetchTest
  const { fetchTest } = api;
  const dispatch = useDispatch();
  const testData = { validation: "pending" };
  return <button onClick={ () => {
    dispatch(fetchTest(testData));  // Tried with/without dispatch
    alert("done");
  }}>Test button</button>
}
export default TestPage;

web-app/src/ App.js ：

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
// ... import all pages
import { Provider } from 'react-redux';
import TestPage from './views/CreateSiteNeed';  // written same way  for the other pages
import { store, FirebaseProvider } from 'common';
function App() {
  return (
    <Provider store={store}>
      <FirebaseProvider>
        <AuthLoading>
          <Router history={hist}>
            <Switch>
              <ProtectedRoute exact component={MyProfile} path="/profile" />
              <!-- [ ... ] more <ProtectedRoute /> lines, form imported Pages line 3. -->
              <ProtectedRoute exact component={TestPage} path="/testpage" />
            </Switch>
          </Router>
        </AuthLoading>
      </FirebaseProvider>
    </Provider>
  );
}
export default App;

我希望有些人會發現這篇文章有幫助，謝謝

Answer 1

這是問題所在：

首先：
我使用的是 Redux，所以fetchTest()有它的testActions.js和testReducer.js文件，它們是函數式的。 但我確實忘記更新我的store.js ：

// [ ... ] import all reducers
import { testReducer as testData } from '../reducers/testReducer'; // was'nt imported

const reducers = combineReducers({
  auth,
  usersdata,
  // [ ... ] other imported reducers
  testData  // My test reducer
}
// The rest is a classic store.js code

第二：
當我使用 Yarn Workspaces 時，我必須在common/dist/index.js中編譯代碼，以使其可以通過整個代碼訪問（即使是本地測試）。
這是編譯代碼的命令（-> 包括上面所做的所有 redux 編輯）並使其可訪問web-app工作區：

yarn workspace common build && yarn workspace web-app add common@1.0.0 --force

命令第二部分的說明（ yarn workspace web-app add common@1.0.0 --force ）：
web-app/package.json文件包含{ "dependencies": {... "common":"1.0.0"... }}