反应-导出上下文提供程序给我错误：“元素类型无效：应为字符串[…]，但得到：未定义”

Question

Summary

I have a file where I create a component with a React Context Provider, which I exported to another file (see code). But when Importing it it gives me an error.

Already tried different methods of importing the file. But get the same error. Logging the imported Provider in the component shows that it exists.

Code

The exported file

function PositionContextProvider({ children }) {
  return <EditModeContext.Provder value={false}>{children}</EditModeContext.Provder>;
}

export { PositionContextProvider };

The import

import { PositionContextProvider } from './PositionContext';

[...]

function Application() {
  return (
   <ContextQuery query={getPositions}>
    {({ data, loading, fetchMore, isFetchingMore }) => {
      return (
        <PositionContextProvider>
          ...
        </PositionContextProvider /> 
      )
    })}
   </ContextQuery />
  )
}

Expected to be able to use the context in any of the components within the Provider but get the error message in the console.

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.

Answer 1

assign your function to variable then export it:

const PositionContextProvider = function({ children }) {
  return <EditModeContext.Provder value={false}>{children}</EditModeContext.Provder>;
}

export { PositionContextProvider };

Answer 2

错字：提供商中缺少“ i”。