Registry / web-framework / synapse-react-client

synapse-react-client

library4.0.9jsnpmunverified

React component library and client SDK for integrating with the Sage Bionetworks Synapse API. Current stable version is 4.0.9, released monthly. Provides pre-built React components (EntityFinder, SynapseTable, etc.) along with React Query hooks and a SynapseContextProvider for managing authentication and caching. Supports TypeScript, MUI theming, and SCSS customization. Differentiated by official Synapse platform integration and a comprehensive set of data access and visualization widgets for biomedical research portals.

web-framework http-networking auth-security

npm install synapse-react-client

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SYNAPSE-REACT-CLIE

synapse-react-client

web-frameworkjavascriptv4.0.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SynapseContextProvider

✓ import { SynapseContextProvider } from 'synapse-react-client'

✗ const SynapseContextProvider = require('synapse-react-client').SynapseContextProvider

ESM-only. Use named import. Provider must wrap all components.

EntityFinder

✓ import { EntityFinder } from 'synapse-react-client'

✗ import EntityFinder from 'synapse-react-client/EntityFinder'

Named export, not a default export. Path imports may break tree shaking.

SynapseClient

✓ import { SynapseClient } from 'synapse-react-client'

✗ import SynapseClient from 'synapse-react-client'

SynapseClient is a namespace object, not a default export.

Shows minimal setup with QueryClientProvider, SynapseContextProvider, and EntityFinder component.

import { SynapseContextProvider, EntityFinder } from 'synapse-react-client'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import React from 'react'; import ReactDOM from 'react-dom/client'; const queryClient = new QueryClient(); const myToken = process.env.SYNAPSE_ACCESS_TOKEN ?? ''; function App() { return ( <QueryClientProvider client={queryClient}> <SynapseContextProvider synapseContext={{ accessToken: myToken, isInExperimentalMode: false, utcTime: true, }} > <EntityFinder entityTypes={['org.sagebionetworks.repo.model.Project']} selectMultiple={false} /> </SynapseContextProvider> </QueryClientProvider> ); } const root = ReactDOM.createRoot(document.getElementById('root')!); root.render(<App />);

Debug

Known issues

breakingReact 19 peer dependency required as of v4.0.0

fix

Upgrade React and React DOM to >=19.2.0. If on React 18, stay on v3.x.

affects: >=4.0.0

breakingESM-only since v3 - CommonJS require will fail

fix

Convert to ES module imports. Use 'import' syntax instead of require.

affects: >=3.0.0

gotchaSynapseContextProvider must wrap all components; missing provider leads to runtime errors

fix

Wrap your component tree with SynapseContextProvider and provide an accessToken.

affects: *

gotchaAccess token handling - do not hardcode tokens in client-side code

fix

Obtain token via secure OAuth flow or environment variables (server-side). Provide as prop to SynapseContextProvider.

affects: *

deprecatedSome components from v2 may have been removed or renamed in v4

fix

Check changelog for breaking changes. For v3->v4 migration, consult upgrade guide.

affects: >=4.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'synapse-react-client'

Package not installed or import path incorrect

fix

Run 'npm install synapse-react-client' and ensure import is correct: 'import { ... } from "synapse-react-client"'

TypeError: Cannot read properties of undefined (reading 'accessToken')

SynapseContextProvider missing or not wrapping the component

fix

Wrap component tree with <SynapseContextProvider synapseContext={{ accessToken: '...' }}>...</SynapseContextProvider>

Error: Could not find react-query context

React Query provider not set up

fix

Wrap app with <QueryClientProvider client={queryClient}> from @tanstack/react-query

Uncaught ReferenceError: require is not defined

Using CommonJS require in ESM environment

fix

Use ES module import syntax instead of require(). Set type: 'module' in package.json if needed.

Upgrade

Version history

4.0.9latest on npm

Audit

Dependencies

@sage-bionetworks/aridhia-clientoptionalpeer dependency for certain portal integrations

reactrequiredcore UI framework peer dependency

react-domrequiredDOM rendering peer dependency

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Sage-Bionetworks/synapse-web-monorepo ↗

packagehttps://www.npmjs.com/package/synapse-react-client ↗

homepagehttps://www.synapse.org ↗