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!