Importing Example jbrowse/react-linear-genome-view errors

Hello. I am not sure if this is an actual bug or perhaps there are some missing dependencies, but after adding the jbrowse react component to my project (using the example component as described here), I am getting some errors:

https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/docs/example.md

To Reproduce

1. Create new react project ‘$ yarn create react-app viz-test’
2. After project is created, navigate to project folder and add the package ‘$ yarn add @jbrowse/react-linear-genome-view’
3. Create component as described in the link, above
4. Import component
5. Get errors (see the output below)

Expected behavior Expecting to see JBrowse component

package.json contents

{
  "name": "viz-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fontsource/roboto": "^4.5.1",
    "@jbrowse/react-linear-genome-view": "^1.5.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "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"
    ]
  }
}

Additional context

Compiled with problems:

ERROR in ./node_modules/@gmod/bbi/esm/blockView.js 18:31-46

Module not found: Error: Can't resolve 'zlib' in '/home/gdollaz/src/viz-test/node_modules/@gmod/bbi/esm'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "zlib": false }


ERROR in ./node_modules/@gmod/binary-parser/dist/binary_parser.js 20:15-32

Module not found: Error: Can't resolve 'buffer' in '/home/gdollaz/src/viz-test/node_modules/@gmod/binary-parser/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }


ERROR in ./node_modules/@gmod/cram/dist/craiIndex.js 38:11-26

Module not found: Error: Can't resolve 'zlib' in '/home/gdollaz/src/viz-test/node_modules/@gmod/cram/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "zlib": false }


ERROR in ./node_modules/@gmod/cram/dist/cramFile/file.js 19:11-26

Module not found: Error: Can't resolve 'zlib' in '/home/gdollaz/src/viz-test/node_modules/@gmod/cram/dist/cramFile'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "zlib": false }


ERROR in ./node_modules/@gmod/cram/dist/io/index.js 3:10-24

Module not found: Error: Can't resolve 'url' in '/home/gdollaz/src/viz-test/node_modules/@gmod/cram/dist/io'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }


ERROR in ./node_modules/@gmod/gff/esm/api.js 1:0-35

Module not found: Error: Can't resolve 'stream' in '/home/gdollaz/src/viz-test/node_modules/@gmod/gff/esm'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/@jbrowse/core/PluginLoader.js 190:21-34

Module not found: Error: Can't resolve 'fs' in '/home/gdollaz/src/viz-test/node_modules/@jbrowse/core'


ERROR in ./node_modules/@jbrowse/core/PluginLoader.js 191:23-38

Module not found: Error: Can't resolve 'path' in '/home/gdollaz/src/viz-test/node_modules/@jbrowse/core'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }


ERROR in ./node_modules/@jbrowse/core/PluginLoader.js 192:21-34

Module not found: Error: Can't resolve 'os' in '/home/gdollaz/src/viz-test/node_modules/@jbrowse/core'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }


ERROR in ./node_modules/@jbrowse/core/PluginLoader.js 193:23-38

Module not found: Error: Can't resolve 'http' in '/home/gdollaz/src/viz-test/node_modules/@jbrowse/core'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ./node_modules/@jbrowse/core/util/io/RemoteFileWithRangeCache.js 33:14-31

Module not found: Error: Can't resolve 'buffer' in '/home/gdollaz/src/viz-test/node_modules/@jbrowse/core/util/io'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }


ERROR in ./node_modules/buffer-crc32/index.js 1:13-37

Module not found: Error: Can't resolve 'buffer' in '/home/gdollaz/src/viz-test/node_modules/buffer-crc32'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }


ERROR in ./node_modules/safe-buffer/index.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in '/home/gdollaz/src/viz-test/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
	- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "buffer": false }

[cmdcolin]

yes, we’ll try and get a release out soon!

[garrettjstevens]

@Manubi yep, looks like our “module” was wrong, will be fixed by https://github.com/GMOD/jbrowse-components/pull/2652. I guess webpack was silently falling back to “main”.