@jbrowse/react-linear-genome-view not working because of @jbrowse/plugin-circular-view

[dreyes17]

When creating a new react app and installing the @jbrowse/react-linear-genome-view it breaks with this error:

Failed to compile.

./node_modules/@jbrowse/plugin-variants/dist/plugin-variants.esm.js
Module not found: Can't resolve '@jbrowse/plugin-circular-view'

The steps to reproduce this bug are

1. Create a react app using: npx create-react-app
2. Install @jbrowse/react-linear-genome-view (1.0.1): npm i @jbrowse/react-linear-genome-view
3. In the auto-generated App.js folder change the contents by (following the tutorial):

import React from 'react'
import 'fontsource-roboto'
import {
createViewState,
createJBrowseTheme,
JBrowseLinearGenomeView,
ThemeProvider,
} from '@jbrowse/react-linear-genome-view'

const theme = createJBrowseTheme()

function View() {
defaultSession = {
name: 'aNameHere', // what the name is doesn't really matter
view: {/* view state here */},
}
const state = createViewState({
assembly,
tracks,
defaultSession,
location: 'ctgA:1105..1221',
onChange: patch => {
console.log('patch', patch)
},
})
return (
<ThemeProvider theme={theme}>
<JBrowseLinearGenomeView viewState={state} />
</ThemeProvider>
)
}

export default View

3. In the auto-generated replace:
   import App from './App'; with import View from './App';
   and
   <App /> with <View />

[Akusem]

I've encountered the same problem, I've tried to install the others @jbrowse npm packages but it hasn't fix the issue

[cmdcolin]

Yes thanks for reporting....we will probably want to publish our circular plugin for this or refactor the circular renderer out of the variant plugin!

[cmdcolin]

Currently the circular-view wasn't yet published as a standalone component yet since it was a big lift by itself to get the linear-genome-view published....

[VivekTodur]

When to expect the update for "react-linear-genome-view" package???

[garrettjstevens]

We just published another version of our packages (v1.0.2). Unfortunately, the intended fix didn't work exactly as expected, but there is now a simple workaround for this until we can get another version published. To get this to work, add @jbrowse/plugin-circular-view to your dependencies. e.g. in a create-react-app app I tried, the dependencies looked like this:

{
  ...
  "dependencies": {
    "@jbrowse/react-linear-genome-view": "^1.0.2",
    "@jbrowse/plugin-circular-view": "^1.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "fontsource-roboto": "^3.0.3",
    "react": "^16.9.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  ...
}

Thanks for your patience as we work through these issues.

[garrettjstevens]

Also, there is a new page with a simple example here: https://github.com/GMOD/jbrowse-components/blob/edc8e0adb3caca12af328394c72c11a81fde4557/products/jbrowse-react-linear-genome-view/docs/example.md