ReactJs Context -- TypeError: Object(...) is not a function

Viewed 1300

I'm getting an "Object(...) is not a function" error in my React app

File: SchemasContext.js

import React, { useState, createContext } from "react";

export const SchemasContext = createContext([]);

export const SchemasProvider = props => {
  const [schemas, setSchemas] = useState([]);

  return (
    <SchemasContext.Provider value={[schemas, setSchemas]}>
      {props.children}
    </SchemasContext.Provider>
  );
};

File: Sidebar.js

import React from 'react';

import { Schemas } from './components.js'
import { SchemasProvider } from "../context/SchemasContext";

console.log('sidebar SchemasProvider: ', SchemasProvider);

function Sidebar() {
  return (
    <SchemasProvider>
      <Schemas />
    </SchemasProvider>
  );
}

The console.log('sidebar SchemasProvider: ', SchemasProvider); statement seems to confirm that the import is done correctly, it outputs:

sidebar SchemasProvider:  
SchemasProvider(props)
​
length: 1
​
name: "SchemasProvider"
​
prototype: Object { … }
​
<prototype>: function ()

And yet I still end up with the errors:

Sidebar.js:8
TypeError: Object(...) is not a function
SchemasContext.js:5
    SchemasProvider SchemasContext.js:5
    React 22
    js index.js:6
    Webpack 3
The above error occurred in the <SchemasProvider> component:
    in SchemasProvider (created by Sidebar)
    in Sidebar

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <redacted> to learn more about error boundaries. react-dom.development.js:16764
TypeError: Object(...) is not a functionSchemasContext.js:5
    SchemasProvider SchemasContext.js:5
    React 18
    js index.js:6
    Webpack 3

Thanks in advance!

0 Answers
Related