Upgrade NextJs to v 12

[sparrowDom]

Version 12 brings some cool things to the table: https://nextjs.org/blog/next-12.
One of the better things is, it upgrades compiler to rust and is said to be 3x-5x faster. That should be moderately beneficial improving the speed when developing new features.

[RishiKumarRay]

what are the things we will need to update?

[sparrowDom]

I would start with updating next dependancy in dapp/package.json to latest 12.x version. And then start solving errors that upgrade causes.

I've quickly attempted this upgrade some time ago, but a lot of errors have surfaced from the next configuration file. I figured that will not be a sub 1 hour task and left it at that.

[franckc]

@gurucrypto23 Mentioned in discord he is going to take a stab at this issue...

[aglamadrid19]

I'm also going to take a stab at this, Next or react isn't my strongest arm but this seems to be a good issue to at least get the dev environment running.

[sparrowDom]

@aglamadrid19 that would be awesome.

[aglamadrid19]

After upgrading react (v17) and next (v12) , webpack schema seems to be incompatible and it seems webpack 5 is required. Also webpack5: false flag has been disabled on Next12

Links I followed:
https://nextjs.org/docs/upgrading
https://nextjs.org/docs/messages/webpack5

Need guidance on how to move from here.

Im guessing next step is how we upgrade from webpack 4 to webpack 5, but I'm not sure how to proceed.

[sparrowDom]

I would guess that next has some webpack logic bundled into it. The webpack like configuration that next uses is present in next.config.js. The error it seems to be complaining about is fs (file system configuration): https://github.com/OriginProtocol/origin-dollar/blob/master/dapp/next.config.js#L37

Though as the comment in that line points out that override was needed to fix some problems with NPM packages expecting to be able to import fs module.

This is a tricky issue to solve. Last time I gave it a quick attempt it was throwing similar errors. Not sure how to continue, since I got stuck at a similar point.

[aglamadrid19]

My best shot for moving forward here is to take this issue to the following:

1 - Take it to the webpack community hoping they can lead us in the right direction.
2 - Take it to the NextJS community hoping they can lead us in the right direction.
3 - Open StackOverflow question

I will perform all 3 and update this issue with all relevant information. Please let me know if this you agree proceeding this way.

[aglamadrid19]

StackOverflow:
https://stackoverflow.com/questions/71562029/nextjs-12-and-webpack-5-unknown-property-fs

Webpack Gitter:

NextJS Question:
vercel/next.js#35500

If anyone has any feedback please feel free to share it.

[sparrowDom]

I see you got some replies to your question @aglamadrid19. Sorry for late reply was OOO last week. I would say feel free to proceed in any way you see fit in order to make progress / get to a solution.

[franckc]

Unassigning.