Module not found: Can't resolve 'fs' in Jbrowse 1.3.3 with Next.js

[Akusem]

Describe the bug

Hi,
I have tried to upgrade to Jbrowse 1.3.3, but since this update, I can't build my Next.js project, as I got the following error:

In dev mode:

./node_modules/@jbrowse/core/util/io/LocalFile.js:42:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/@jbrowse/core/util/io/index.js
./node_modules/@jbrowse/plugin-bed/dist/plugin-bed.esm.js
./node_modules/@jbrowse/react-linear-genome-view/dist/react-linear-genome-view.cjs.development.js
./node_modules/@jbrowse/react-linear-genome-view/dist/index.js
./pages/index.js

And this one when trying to build the production version:

Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/export/home1/users/mpb/zweig/Desktop/projects/nextjs-jbrowse/node_modules/@jbrowse/core/util/io'


> Build error occurred
Error: > Build failed because of webpack errors
    at /export/home1/users/mpb/zweig/Desktop/projects/nextjs-jbrowse/node_modules/next/dist/build/index.js:390:19
    at async Span.traceAsyncFn (/export/home1/users/mpb/zweig/Desktop/projects/nextjs-jbrowse/node_modules/next/dist/telemetry/trace/trace.js:60:20)

To Reproduce

I have created a new Next.js project with just Jbrowse, so you can easily reproduce the error. It is available here.

Step to clone and launch it:

git clone 
cd nextjs-jbrowse
# Dev environnement 
yarn dev
# Production
yarn build && yarn start

Version:
Next.js: 11.1.0
Jbrowse: 1.3.3
React & React-Dom: 17.0.2

[garrettjstevens]

Hi @Akusem, Nest.js does some unexpected things in its bundles where it runs our code in a Node-like environment, but without the Node builtin modules available. You can avoid this by making fs be an empty import in Next.js (that way it can import fs successfully even though it won't get used). For Webpack 4, that looked something like this, but it looks like your example app uses Webpack 5. I was able to get past that error by doing this in nex.config.js:

diff --git a/next.config.js b/next.config.js
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,10 @@
 module.exports = {
   reactStrictMode: true,
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback.fs = false
+    }
+
+    return config
+  },
 }

That seems to resolve the error you posted about, but then gives another error that I am still investigating.

[garrettjstevens]

The second error I mentioned above should be fixed by #2245, but I still get another error in your app even with that bugfix. The error is Error: ReactDOMServer does not yet support Suspense.. I don't know if something we changed internally about using suspense affected this. What version of @jbrowse/react-linear-genome-view were you using before you tried this upgrade?

[Akusem]

Thanks for your fast response !
Indeed, the solution you have proposed through next.config.js work !
Using this + upgrading to 1.3.5 allowed me to fix this issue in my project, and I haven't encountered the one with react suspense.

However, this problem in the toy project seem to come from Jbrowse, as it disappear if I put <JBrowseLinearGenomeView viewState={state} /> line in comment. Also, I have updated the project to fix config issue I hadn't seen, since it was crashing.

Note, I do get several warnings since update,

First, concerning incompatibilities with React 17:

warning "@jbrowse/react-linear-genome-view > @jbrowse/core@1.3.4" has unmet peer dependency "@material-ui/data-grid@^4.0.0-alpha.37".
warning "@jbrowse/react-linear-genome-view > mobx-react@6.3.1" has incorrect peer dependency "react@^16.8.0 || 16.9.0-alpha.0".
warning "@jbrowse/react-linear-genome-view > react-use-dimensions@1.2.1" has incorrect peer dependency "react@^16.8.x".
warning "@jbrowse/react-linear-genome-view > react-use-dimensions@1.2.1" has incorrect peer dependency "typescript@^3.5.2".
warning "@jbrowse/react-linear-genome-view > @jbrowse/plugin-config > react-simple-code-editor@0.9.3" has incorrect peer dependency "react@^16.0.0".
warning "@jbrowse/react-linear-genome-view > @jbrowse/plugin-config > react-simple-code-editor@0.9.3" has incorrect peer dependency "react-dom@^16.0.0".
warning "@jbrowse/react-linear-genome-view > @jbrowse/plugin-alignments > react-d3-axis@0.1.2" has incorrect peer dependency "react@^15.0.0".
warning "@jbrowse/react-linear-genome-view > @jbrowse/plugin-linear-genome-view > react-sizeme@2.6.12" has incorrect peer dependency "react@^0.14.0 || ^15.0.0-0 || ^16.0.0".
warning "@jbrowse/react-linear-genome-view > @jbrowse/plugin-linear-genome-view > react-sizeme@2.6.12" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.0-0 || ^16.0.0".
warning "@jbrowse/react-linear-genome-view > mobx-react > mobx-react-lite@2.2.2" has incorrect peer dependency "react@^16.8.0".

Second, concerning material-ui (which I don't use in my project, so I shouldn't have impacted its version):

warning "@jbrowse/react-linear-genome-view > @jbrowse/plugin-variants > @material-ui/data-grid@4.0.0-alpha.37" has unmet peer dependency "@material-ui/styles@^4.11.4 || ^5.0.0-beta.0".

And finally I also have warning concerning core-js for @gmod/gff and @gmod/tabix:

warning @jbrowse/react-linear-genome-view > @jbrowse/plugin-gff3 > @gmod/gff > babel-runtime > core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning @jbrowse/react-linear-genome-view > @jbrowse/plugin-gff3 > @gmod/tabix > @babel/runtime-corejs2 > core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

I had the impression that Jbrowse was compatible with react 17, it is not the case ?

[cmdcolin]

@Akusem those warnings can be ignored. The code should run fine despite them. We can do some work to try to clean up some warnings but it should be fine.

We also are perfectly fine with react 17, it is what we use currently now

Just for more info e.g. Some of the warnings are like "warning "@jbrowse/react-linear-genome-view > mobx-react > mobx-react-lite@2.2.2" has incorrect peer dependency "react@^16.8.0"" because the code thinks it wants react 16.8 but generally they just didn't update to say that they also allow react 17, and we dont have control over that necessarily unless they update and we update along with it. until then, it's just a little diagnostic warning.

[Akusem]

@cmdcolin Good to know, I just wanted to be sure it didn't slip under your radar.
@garrettjstevens Thanks again for your help, I close the issue.