GMOD · cmdcolin · Jun 4, 2024 · May 28, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2878,8 +2878,7 @@ yarn run v1.22.18 $ lerna-changelog 2.6.1
     link in new tab by default in feature details
     ([@cmdcolin](https://github.com/cmdcolin))
   - [#3053](https://github.com/GMOD/jbrowse-components/pull/3053) Avoid
-    displaying [object Object] on deeply nested data in base feature details
-    ([@cmdcolin](https://github.com/cmdcolin))
+    displaying [object Object] on deeply nested data in base feature details ([@cmdcolin](https://github.com/cmdcolin))
 
 #### :house: Internal
 
@@ -4767,8 +4766,7 @@ yarn run v1.22.18 $ lerna-changelog 2.6.1
     search for tracks with parentheses in tracklist
     ([@cmdcolin](https://github.com/cmdcolin))
   - [#2512](https://github.com/GMOD/jbrowse-components/pull/2512) Fix [object
-    Window] issue in alignment read vs reference dialog
-    ([@cmdcolin](https://github.com/cmdcolin))
+    Window] issue in alignment read vs reference dialog ([@cmdcolin](https://github.com/cmdcolin))
   - [#2499](https://github.com/GMOD/jbrowse-components/pull/2499) Add missing
     dependency to CLI ([@garrettjstevens](https://github.com/garrettjstevens))
 - `core`

diff --git a/component_tests/cgv/craco.config.js b/component_tests/cgv/craco.config.js
diff --git a/component_tests/cgv/package.json b/component_tests/cgv/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^7.1.0",
     "@fontsource/roboto": "^4.5.5",
     "@jbrowse/plugin-linear-genome-view": "^2.3.3",
     "@jbrowse/react-circular-genome-view": "^2.0.0",
@@ -16,7 +15,6 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "cypress": "^12.9.0",
-    "node-polyfill-webpack-plugin": "^2.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-scripts": "^5.0.1",
@@ -49,10 +47,10 @@
     "@jbrowse/react-circular-genome-view": "file:./packed/jbrowse-react-circular-genome-view.tgz"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "craco eject",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
     "test:e2e": "start-test 'serve --listen 5000 build/' 5000 'cypress run --headless --browser chrome'"
   },
   "eslintConfig": {

diff --git a/component_tests/lgv/craco.config.js b/component_tests/lgv/craco.config.js
@@ -1,18 +1,10 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
-
 module.exports = {
   devServer: config => {
     config.static.staticOptions = { fallthrough: false }
     return config
   },
   webpack: {
-    plugins: [
-      new NodePolyfillPlugin({
-        excludeAliases: ['console'],
-      }),
-    ],
     configure: config => {
-      config.resolve.fallback = { fs: false }
       // the 'auto' setting is important for properly resolving the loading of
       // worker chunks xref
       // https://github.com/webpack/webpack/issues/13791#issuecomment-897579223

diff --git a/component_tests/lgv/package.json b/component_tests/lgv/package.json
@@ -15,7 +15,6 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "cypress": "^12.9.0",
-    "node-polyfill-webpack-plugin": "^2.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-scripts": "^5.0.1",

diff --git a/component_tests/react-app/craco.config.js b/component_tests/react-app/craco.config.js
@@ -1,18 +1,10 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
-
 module.exports = {
   devServer: config => {
     config.static.staticOptions = { fallthrough: false }
     return config
   },
   webpack: {
-    plugins: [
-      new NodePolyfillPlugin({
-        excludeAliases: ['console'],
-      }),
-    ],
     configure: config => {
-      config.resolve.fallback = { fs: false }
       // the 'auto' setting is important for properly resolving the loading of
       // worker chunks xref
       // https://github.com/webpack/webpack/issues/13791#issuecomment-897579223

diff --git a/component_tests/react-app/package.json b/component_tests/react-app/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@craco/craco": "^7.0.0",
     "@fontsource/roboto": "^4.5.5",
-    "@jbrowse/react-app": "file:./packed/jbrowse-react-app.tgz",
+    "@jbrowse/react-app": "^2.0.0",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
@@ -15,9 +15,8 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "cypress": "^12.9.0",
-    "node-polyfill-webpack-plugin": "^2.0.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "^5.0.1",
     "serve": "^14.2.0",
     "start-server-and-test": "^2.0.0",

diff --git a/package.json b/package.json
@@ -130,7 +130,6 @@
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.1.7",
     "nock": "^13.2.1",
-    "node-polyfill-webpack-plugin": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "oclif": "^4.0.0",
     "prettier": "^3.2.5",

diff --git a/products/jbrowse-desktop/scripts/config.js b/products/jbrowse-desktop/scripts/config.js
@@ -1,12 +1,7 @@
 const webpack = require('webpack')
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 
 module.exports = function webpackConfigF(config) {
   config.plugins.push(
-    new NodePolyfillPlugin({
-      excludeAliases: ['console'],
-    }),
-
     // this is needed to properly polyfill buffer in desktop, after the CRA5
     // conversion it was observed cram, twobit, etc that use
     // @gmod/binary-parser complained of buffers not being real buffers

diff --git a/products/jbrowse-react-app/.storybook/main.js b/products/jbrowse-react-app/.storybook/main.js
@@ -1,4 +1,3 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 module.exports = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../public'],
@@ -12,11 +11,6 @@ module.exports = {
   },
 
   webpackFinal: async config => {
-    config.plugins.push(
-      new NodePolyfillPlugin({
-        excludeAliases: ['console'],
-      }),
-    )
     config.module.rules.push({
       test: /\.(ts|tsx|js|jsx)$/,
       use: [
@@ -29,7 +23,6 @@ module.exports = {
         },
       ],
     })
-    config.resolve.fallback.fs = false
     config.resolve.extensions.push('.ts', '.tsx')
     return config
   },

diff --git a/products/jbrowse-react-app/webpack.config.js b/products/jbrowse-react-app/webpack.config.js
@@ -1,4 +1,3 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 const path = require('path')
 const webpack = require('webpack')
 
@@ -29,15 +28,11 @@ module.exports = {
     },
   },
   plugins: [
-    new NodePolyfillPlugin({
-      excludeAliases: ['console'],
-    }),
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 1,
     }),
   ],
   resolve: {
-    fallback: { fs: false, http: false },
     extensions: [
       '.mjs',
       '.web.js',

diff --git a/products/jbrowse-react-circular-genome-view/.storybook/main.js b/products/jbrowse-react-circular-genome-view/.storybook/main.js
@@ -1,4 +1,3 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 module.exports = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../public'],
@@ -12,12 +11,6 @@ module.exports = {
   },
 
   webpackFinal: async config => {
-    config.plugins.push(
-      new NodePolyfillPlugin({
-        excludeAliases: ['console'],
-      }),
-    )
-
     config.module.rules.push({
       test: /\.(ts|tsx|js|jsx)$/,
       use: [
@@ -30,7 +23,6 @@ module.exports = {
         },
       ],
     })
-    config.resolve.fallback.fs = false
     config.resolve.extensions.push('.ts', '.tsx')
     return config
   },

diff --git a/products/jbrowse-react-circular-genome-view/webpack.config.js b/products/jbrowse-react-circular-genome-view/webpack.config.js
@@ -1,5 +1,4 @@
 const path = require('path')
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 const webpack = require('webpack')
 
 const buildDir = path.resolve('.')
@@ -30,15 +29,11 @@ module.exports = {
     },
   },
   plugins: [
-    new NodePolyfillPlugin({
-      excludeAliases: ['console'],
-    }),
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 1,
     }),
   ],
   resolve: {
-    fallback: { fs: false, http: false },
     extensions: [
       '.mjs',
       '.web.js',

diff --git a/products/jbrowse-react-linear-genome-view/.storybook/main.js b/products/jbrowse-react-linear-genome-view/.storybook/main.js
@@ -1,4 +1,3 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 module.exports = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../public'],
@@ -12,11 +11,6 @@ module.exports = {
   },
 
   webpackFinal: async config => {
-    config.plugins.push(
-      new NodePolyfillPlugin({
-        excludeAliases: ['console'],
-      }),
-    )
     config.module.rules.push({
       test: /\.(ts|tsx|js|jsx)$/,
       use: [
@@ -29,7 +23,6 @@ module.exports = {
         },
       ],
     })
-    config.resolve.fallback.fs = false
     config.resolve.extensions.push('.ts', '.tsx')
     return config
   },

diff --git a/products/jbrowse-react-linear-genome-view/webpack.config.js b/products/jbrowse-react-linear-genome-view/webpack.config.js
@@ -1,4 +1,3 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 const path = require('path')
 const webpack = require('webpack')
 
@@ -29,15 +28,11 @@ module.exports = {
     },
   },
   plugins: [
-    new NodePolyfillPlugin({
-      excludeAliases: ['console'],
-    }),
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 1,
     }),
   ],
   resolve: {
-    fallback: { fs: false, http: false },
     extensions: [
       '.mjs',
       '.web.js',

diff --git a/products/jbrowse-web/scripts/config.js b/products/jbrowse-web/scripts/config.js
@@ -1,10 +1,12 @@
 const webpack = require('webpack')
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 
 module.exports = function (config) {
   config.plugins.push(
-    new NodePolyfillPlugin({
-      excludeAliases: ['console'],
+    // this is needed to properly polyfill buffer in desktop, after the CRA5
+    // conversion it was observed cram, twobit, etc that use
+    // @gmod/binary-parser complained of buffers not being real buffers
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
     }),
     new webpack.DefinePlugin({
       // Global mobx-state-tree configuration.

diff --git a/website/blog/2021-12-20-v1.5.2-release.md b/website/blog/2021-12-20-v1.5.2-release.md
@@ -113,8 +113,7 @@ details.
     search for tracks with parentheses in tracklist
     ([@cmdcolin](https://github.com/cmdcolin))
   - [#2512](https://github.com/GMOD/jbrowse-components/pull/2512) Fix [object
-    Window] issue in alignment read vs reference dialog
-    ([@cmdcolin](https://github.com/cmdcolin))
+    Window] issue in alignment read vs reference dialog ([@cmdcolin](https://github.com/cmdcolin))
   - [#2499](https://github.com/GMOD/jbrowse-components/pull/2499) Add missing
     dependency to CLI ([@garrettjstevens](https://github.com/garrettjstevens))
 - `core`

diff --git a/website/blog/2022-07-07-v2.0.0-release.md b/website/blog/2022-07-07-v2.0.0-release.md
@@ -74,8 +74,7 @@ details.
     link in new tab by default in feature details
     ([@cmdcolin](https://github.com/cmdcolin))
   - [#3053](https://github.com/GMOD/jbrowse-components/pull/3053) Avoid
-    displaying [object Object] on deeply nested data in base feature details
-    ([@cmdcolin](https://github.com/cmdcolin))
+    displaying [object Object] on deeply nested data in base feature details ([@cmdcolin](https://github.com/cmdcolin))
 
 #### :house: Internal
 

diff --git a/website/src/pages/download.mdx b/website/src/pages/download.mdx
@@ -149,11 +149,8 @@ export const DownloadCardContainer = () => {
             <Link href="/jb2/docs/quickstart_desktop/">
               instructions after downloading
             </Link>
-            . Can't find what you're looking for? Checkout <Link
-              href={downloadLink}
-            >
-              other platforms
-            </Link>.
+            . Can't find what you're looking for? Checkout{' '}
+            <Link href={downloadLink}>other platforms</Link>.
           </Typography>
         </div>
       </Box>