@jbrowse/react-linear-genome-view fail to compile in Next.js since release 1.0.4

[Akusem]

I have tried to update @jbrowse/react-linear-genome-view to 1.0.4 today, but since, I can't compile jbrowse anymore and I get this error:

./node_modules/@gmod/indexedfasta/dist/localFile.js:29:0
Module not found: Can't resolve 'fs'
null

Also, after reversing to 1.0.3 the error stay, so it is certainly due to a change in one of the dependencies ?

To Reproduce

Try to open a page with @jbrowse/react-linear-genome-view.

Version:

@jbrowse/react-linear-genome-view: 1.0.4 (but error still here after a reverse to 1.0.3)
next: 10.0.5
react: 16.13.1

[garrettjstevens]

Hi @Akusem, I haven't been able to reproduce this, v1.0.4 seems to work in the places I've tried it. There was recently an update to the @gmod/indexedfasta dependency, so there may be some incompatibility there with your setup. Could you check which version of @gmod/indexedfasta is installed in your project? If you're using yarn, you can do yarn info @gmod/indexedfasta version.

[elliothershberg]

@Akusem Are you seeing this error when building your project, or visiting your app in the browser? I recently had issues with a page not loading after updating to 1.0.4. I had to empty my cache and hard reload, which resolved the problem. (this option is available in Chrome by right clicking on the refresh button with the developer tools open)

[Akusem]

Hi @garrettjstevens, hi @elliothershberg, thank for your answers.

My version of @gmod/indexedfasta is 1.1.0.
I've tried with to use the version 1.0.13 but after an yarn upgrade @gmod/indexedfasta@1.0.13,
yarn info @gmod/indexedfasta version tell me it's still using the 1.1.0 version.

I've seen that all the dependencies are in 1.0.4 (like @jbrowse/core for example). Are you aware of a way to pin all of the deps from @jbrowse in 1.0.3 easily ?

@elliothershberg, unfortunately, the problem is happening at the build phase, not in the browser, as you can see from my NextJs docker :

web_1     | event - build page: /genomeBrowser
web_1     | wait  - compiling...
web_1     | error - ./node_modules/@jbrowse/plugin-sequence/node_modules/@gmod/indexedfasta/dist/localFile.js:29:0
web_1     | Module not found: Can't resolve 'fs'
web_1     | null

[cmdcolin]

I think I can confirm the error when using nextjs

The change that caused this issue was to try to add compatibility for rollup js actually, but apparently needs fixing for nextjs now :)

[cmdcolin]

(I'm not sure of how to pin the deps properly either...our package.json for the sequence plugin says that it should allow 1.0.13 but it seems to be using the 1.1.0 by default, and not sure how to force it to downgrade off the top of my head)

[garrettjstevens]

I think until we get a fix figured out you can force yarn to use a specific version by using yarn's selective dependency resolution. I haven't used it like this before, but I think it might look something like this in your package.json:

{
  "resolutions": {
    "@jbrowse/plugin-sequence/**/@gmod/indexedfasta": "1.0.13"
  }
}

[Akusem]

@garrettjstevens, you are right, I was able to avoid the error using yarn selective dependency resolution.

However, I had to modify your snippet like that, and I don't know why:

{
  "resolutions": {
    "@gmod/indexedfasta": "1.0.13"
  }
}

but hey, it work !

Finally, the most weirdly thing is that yarn info @gmod/indexedfasta version still tell me that I'm using 1.1.0, even if the bug doesn't happen anymore...

@cmdcolin Thank for testing it on NextJs, I hope it will not be too hard to fix, tell me if I can help.
At least a workaround is available for now.

[elliothershberg]

@Akusem I'm working on this issue right now, and wanted to note one other possible fix:

Based on this issue: vercel/next.js#7755

One way to resolve it is to add these lines to your next.config.js file:

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

However, if the resolution is working for you, feel free to stick with it, I just want to document this other option.

Also, would you mind providing some info on your Next.js setup with JBrowse 2? Did you end up needing to use dynamic imports? I'm asking because I'm currently trying to smooth out a few things with how our React component works inside of a Next.js app.

[Akusem]

@elliothershberg, I've tried the fix using next.config.js and it indeed work too.

Also, would you mind providing some info on your Next.js setup with JBrowse 2?

Yes, no problem !

Did you end up needing to use dynamic imports?

Yes I'm currently using them, as without it, it fail at build phase with the following error:

➜ yarn build       
yarn run v1.22.5
$ next build
info  - Loaded env from /path/to/my/install/.env.local
info  - Creating an optimized production build  
info  - Compiled successfully

> Build error occurred
ReferenceError: window is not defined
    at Object.<anonymous> (/path/to/my/install/node_modules/@jbrowse/core/util/index.js:1016:11)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/path/to/my/install/node_modules/@jbrowse/core/ui/Menu.js:52:13)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) {
  type: 'ReferenceError'
}
error Command failed with exit code 1.

Tell me if you need anything else.

[elliothershberg]

@Akusem thanks a ton for the info, it really helps us during development!

We are going to work on resolving the issue with fs that popped up in 1.0.4, and for the foreseeable future using dynamic imports will likely continue to be the most effective approach for use in Next.js apps.