OHIF Viewer within React

I am trying to run the OHIF Viewer inside a simple react application but I am getting the error posted below.

Is OHIF Viewer within React even supported?

Any suggestion to run OHIF Viewer inside a React App?

I went through the following steps:

Sample React App from: https://create-react-app.dev/docs/getting-started/ GitHub repo: https://github.com/EduardoSantanaSeverino/OhifViewerReact

1:

npx create-react-app my-app
cd my-app
yarn add @ohif/viewer

1. add OHIF Viewer inside the app.js, please see the repo for details.

yarn start

1. then got the following errors:

Starting the development server...


<--- Last few GCs --->

[30813:0x3f29ab0]    61422 ms: Mark-sweep 2016.0 (2051.1) -> 2015.1 (2051.1) MB, 1890.1 / 0.1 ms  (average mu = 0.188, current mu = 0.099) allocation failure scavenge might not succeed
[30813:0x3f29ab0]    64409 ms: Mark-sweep 2016.2 (2051.3) -> 2015.4 (2051.3) MB, 2784.6 / 0.0 ms  (average mu = 0.126, current mu = 0.068) allocation failure GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x13725d9]
Security context: 0x16340b4808a1 <JSObject>
    1: mark [0x33f926fe4a31] [/home/eduardosantana/code-work/wimtach/test-viewer2/my-app/node_modules/@babel/generator/lib/source-map.js:~45] [pc=0x307bf0218b94](this=0x0189bc0034d9 <SourceMap map = 0x3697629b4a01>,432437,126,197244,100,0x0234db9801b1 <null>,0x0234db9801b1 <null>,0x0234db9806e1 <false>)
    2: token [0x53e2ddc3e01] [/home/eduardosantana/code-work...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20200216.211915.30813.0.001.json
Node.js report completed
 1: 0x9d8da0 node::Abort() [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 2: 0x9d9f56 node::OnFatalError(char const*, char const*) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 3: 0xb37dbe v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 4: 0xb38139 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 5: 0xce34f5  [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 6: 0xce3b86 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 7: 0xcefa1a v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 8: 0xcf0925 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
 9: 0xcf3338 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
10: 0xcb9c67 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
11: 0xfefcf9 v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
12: 0x13725d9  [/home/eduardosantana/.nvm/versions/node/v12.13.0/bin/node]
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[codecraft302]

Found a solution. GENERATE_SOURCEMAP=false in .env file

[danihodovic]

We could have better tests/support for what you’re attempting, but I am curious how much demand their is for embedding/usage with this approach, and the reasons users are opting for it. If you’re using all of @ohif/viewer, why not just host it at a /viewer or something similar?

In our case we want to re-use the viewer, study list and tools from @ohif/ui. We want to build an app around components in @ohif/ui.

The OHIF docs state that @ohif/ui “is a React Component library that contains the reusable components that power the OHIF Viewer.”…Aims to “aid rapid application development for context specific viewers“."

It seems like OHIF isn’t composable because packaging it in an existing React app causes memory errors.

If you are using OHIF to build “context specific viewers”, how do you go about using it as a library rather than embedding the entire @ohif/viewer app?

I’ve managed to build the project by disabling sourcemaps (GENERATE_SOURCEMAP=true), but that makes the development / debugging process much harder.