Error running OHIF Viewer npm package as a react component

[hessam61]

Bug Report

Describe the Bug

We're trying t add our own authorization flow to the OHIF Viewer and we started exploring a stand-alone npm package that can be wrapped around in a React application. During this process, we noticed that @ohif/viewer package works under the old version of React, so we started downgrading a basic React app from latest version 18+ to ^16.0.0. After resolving all the dependency issues, we added ohif component as advised in #1690, but we're getting the following error:

Something went wrong.

Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

    in Provider
    in ErrorBoundary
    in OHIFErrorBoundary
    in App (at src/index.js:149)

What steps can we follow to reproduce the bug?

1. Installed @ohif/viewer, and downgraded React core to v16.
2. Disabled GENERATE_SOURCEMAP
3. npm install, npm run build, and npm run start:

Compiled successfully!

You can now view ohif-viewer in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.86.234:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

package.json:

{
  "name": "ohif-viewer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ohif/viewer": "^4.12.30",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from '@ohif/viewer'

const config = window.config = {
  // default: '/'
  routerBasename: '/',
  /* Rest of the config goes here */
  /* We're using default config for testing */ 
};

ReactDOM.render(
  <App config={config} />,
  document.getElementById('root')
);

Console log:

index.umd.js:341404 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at W (index.umd.js:341404:1)
    at useMemo (index.umd.js:341501:1)
    at Provider (index.umd.js:86509:1)
    at renderWithHooks (react-dom.development.js:14796:1)
    at mountIndeterminateComponent (react-dom.development.js:17408:1)
    at beginWork (react-dom.development.js:18486:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238:1)
    at invokeGuardedCallback (react-dom.development.js:291:1)
    at beginWork$1 (react-dom.development.js:23052:1)


react-dom.development.js:19408 The above error occurred in the <Provider> component:
    in Provider
    in ErrorBoundary
    in OHIFErrorBoundary
    in App (at src/index.js:149)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Are there any instructions on how to use the stand-alone package as a react component? Any help is appreciated. Thanks.

[selvesandev]

Bumped into the same issue

[sedghi]

In latest version we have removed the npm package load for OHIF.

In OHIf v3, you can make use of iframe

https://docs.ohif.org/deployment/cors/#embedding-ohif-in-an-iframe