JBrowse 2 linear genome view React component in a flask app

[vpandey-om]

Hi

I would like to use JBrowse 2 in my flask app and was wondering whether can I use JBrowse 2 linear genome view React component.

I read embedding JBrowse 2 in app form here (https://jbrowse.org/demos/cancer-demo-2020/ ) but I cannot integrate in my flask app .

this line (import React from 'react') throws error.
Uncaught SyntaxError: Cannot use import statement outside a module when

I am looking forward for your reply.

[garrettjstevens]

Hi @vpandey-om, are you able to use other React components in your app? That error message makes it sound like there is a problem using React in general and not specifically a JBrowse problem.

[vpandey-om]

Thank you !! Somehow I managed to embed JBrowse as a React component and it is working but it throws lot of error when I see on console.

index.js:1 Material-UI: the createMuiTheme function was renamed to createTheme.

You should use `import { createTheme } from '@material-ui/core/styles'`
console.<computed> @ index.js:1
createMuiTheme @ createTheme.js:94
./node_modules/@jbrowse/core/ui/theme.js @ theme.js:27
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
./node_modules/@jbrowse/core/ui/index.js @ index.js:97
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
./node_modules/@jbrowse/react-linear-genome-view/dist/react-linear-genome-view.cjs.development.js @ index.js:8
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
./node_modules/@jbrowse/react-linear-genome-view/dist/index.js @ index.js:7
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ App.js:14
./src/components/View.js @ View.js:116
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ index.css:7
./src/App.js @ App.js:14
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ index.css?bb0a:82
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:12
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.

You should use `import { alpha } from '@material-ui/core/styles'`
console.<computed> @ index.js:1
fade @ colorManipulator.js:234
(anonymous) @ ViewContainer.tsx:38
create @ getStylesCreator.js:19
attach @ makeStyles.js:94
(anonymous) @ makeStyles.js:236
useSynchronousEffect @ makeStyles.js:188
useStyles @ makeStyles.js:228
(anonymous) @ ViewContainer.tsx:98
(anonymous) @ observer.js:24
(anonymous) @ useObserver.js:91
trackDerivedFunction @ mobx.module.js:775
Reaction.track @ mobx.module.js:1809
(anonymous) @ useObserver.js:89
useQueuedForceUpdateBlock @ useQueuedForceUpdate.js:19
useObserver @ useObserver.js:83
wrappedComponent @ observer.js:24
renderWithHooks @ react-dom.development.js:14985
updateFunctionComponent @ react-dom.development.js:17356
updateSimpleMemoComponent @ react-dom.development.js:17215
updateMemoComponent @ react-dom.development.js:17092
beginWork @ react-dom.development.js:19135
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:12
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 12 more frames
index.js:1 Warning: Failed prop type: The prop `justify` of `ForwardRef(Grid)` is deprecated. Use `justifyContent` instead, the prop was renamed.
    at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:107181:35)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:102556:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at Suspense
    at div
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:115912:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:115912:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at div
    at ScopedCssBaseline (http://localhost:3000/static/js/vendors~main.chunk.js:117874:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:156954:24)
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at View
    at div
    at App
console.<computed> @ index.js:1
printWarning @ react.development.js:220
error @ react.development.js:196
checkPropTypes @ react.development.js:1935
validatePropTypes @ react.development.js:2136
createElementWithValidation @ react.development.js:2240
WithStyles @ withStyles.js:79
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:1 Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.

You should use `import { alpha } from '@material-ui/core/styles'` 
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at div
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at Suspense
    at div
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:115912:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:115912:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at div
    at ScopedCssBaseline (http://localhost:3000/static/js/vendors~main.chunk.js:117874:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:156954:24)
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at View
    at div
    at App
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2574
fade @ colorManipulator.js:259
(anonymous) @ Header.tsx:42
create @ getStylesCreator.js:19
attach @ makeStyles.js:94
(anonymous) @ makeStyles.js:236
useSynchronousEffect @ makeStyles.js:188
useStyles @ makeStyles.js:228
(anonymous) @ Header.tsx:109
(anonymous) @ observer.js:24
(anonymous) @ useObserver.js:91
trackDerivedFunction @ mobx.module.js:775
Reaction.track @ mobx.module.js:1809
(anonymous) @ useObserver.js:89
useQueuedForceUpdateBlock @ useQueuedForceUpdate.js:19
useObserver @ useObserver.js:83
wrappedComponent @ observer.js:24
renderWithHooks @ react-dom.development.js:14985
updateFunctionComponent @ react-dom.development.js:17356
updateSimpleMemoComponent @ react-dom.development.js:17215
updateMemoComponent @ react-dom.development.js:17092
beginWork @ react-dom.development.js:19135
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22387
reactionScheduler @ mobx.module.js:1919
runReactions @ mobx.module.js:1895
endBatch @ mobx.module.js:1595
_endAction @ mobx.module.js:981
executeAction @ mobx.module.js:935
bound setLoaded @ mobx.module.js:915
runMiddleWares @ mobx-state-tree.module.js:2562
runWithActionContext @ mobx-state-tree.module.js:2426
res @ mobx-state-tree.module.js:2453
_callee$ @ index.js:895
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
(anonymous) @ index.js:920
executeAction @ mobx.module.js:928
GRCh38 assembly loading @ mobx.module.js:915
reactionRunner @ mobx.module.js:2167
(anonymous) @ mobx.module.js:2150
Reaction.runReaction @ mobx.module.js:1775
runReactionsHelper @ mobx.module.js:1911
reactionScheduler @ mobx.module.js:1890
(anonymous) @ mobx.module.js:1919
batchedUpdates$1 @ react-dom.development.js:22380
reactionScheduler @ mobx.module.js:1919
runReactions @ mobx.module.js:1895
Reaction.schedule @ mobx.module.js:1759
autorun @ mobx.module.js:2121
createViewState @ createViewState.ts:69
View @ View.js:106
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:12
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 62 more frames
index.js:1 Warning: Failed prop type: The prop `onExit` of `ForwardRef(Popover)` is deprecated. Use the `TransitionProps` prop instead.
    at Popover (http://localhost:3000/static/js/vendors~main.chunk.js:116127:22)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at Menu (http://localhost:3000/static/js/vendors~main.chunk.js:43009:20)
    at div
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at div
    at div
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:115912:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at div
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at div
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at Suspense
    at div
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:115912:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:115912:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at div
    at ScopedCssBaseline (http://localhost:3000/static/js/vendors~main.chunk.js:117874:23)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:158252:31)
    at div
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:156954:24)
    at wrappedComponent (http://localhost:3000/static/js/vendors~main.chunk.js:247538:76)
    at View
    at div
    at App
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2574
printWarning @ react.development.js:220
error @ react.development.js:196
checkPropTypes @ react.development.js:1935
validatePropTypes @ react.development.js:2136
createElementWithValidation @ react.development.js:2240
WithStyles @ withStyles.js:79
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22387
reactionScheduler @ mobx.module.js:1919
runReactions @ mobx.module.js:1895
endBatch @ mobx.module.js:1595
_endAction @ mobx.module.js:981
executeAction @ mobx.module.js:935
bound setLoaded @ mobx.module.js:915
runMiddleWares @ mobx-state-tree.module.js:2562
runWithActionContext @ mobx-state-tree.module.js:2426
res @ mobx-state-tree.module.js:2453
_callee$ @ index.js:895
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
(anonymous) @ index.js:920
executeAction @ mobx.module.js:928
GRCh38 assembly loading @ mobx.module.js:915
reactionRunner @ mobx.module.js:2167
(anonymous) @ mobx.module.js:2150
Reaction.runReaction @ mobx.module.js:1775
runReactionsHelper @ mobx.module.js:1911
reactionScheduler @ mobx.module.js:1890
(anonymous) @ mobx.module.js:1919
batchedUpdates$1 @ react-dom.development.js:22380
reactionScheduler @ mobx.module.js:1919
runReactions @ mobx.module.js:1895
Reaction.schedule @ mobx.module.js:1759
autorun @ mobx.module.js:2121
createViewState @ createViewState.ts:69
View @ View.js:106
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:7
./src/index.js @ index.js:12
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ index.js:12
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 50 more frames