[Upgrade to Next 12] - WIP

[payapula]

Description

To update repo to use latest version of nextJS.

There is branch WIP - feature/update_next_and_its_deps

It has the latest version of the following libraries

• chakra
• next
• next-seo
• next-mdx-remote

Issues

1. Faced an issue with node version, as next bumped the minimum required node version from 12.0 to 12.22

Solution: Use bash terminal which has the latest node version, v14.7.5

Nvm is installed in bash terminal
If nvm common not found in bash then troubleshoot - https://github.com/nvm-sh/nvm#troubleshooting-on-linux
bash: source ~/.bashrc
Then bash should by default have node version 14x
node —version
v14.7.5

2. Unable to start the server. React is not defined

This is because next now uses SWC compiler instead of babel. Chakra uses emotion which has a dependency on babel plugin.

The porting of this babel plugin into SWC is in progress - Port @emotion/babel-plugin to SWC. Hence, waiting for it to complete the next update.

The issue was because of JSX pragma being used to style some of the elements in the components. As a workaround, those css props were removed and replaced with chakra props 😄.

This is no longer a blocker.

Progress Overview

• Update chakra
• Update next and all related deps
• Fix node issue
• Fix React not defined issue

[payapula]

Faced one more issue, because of chakra upgrade from 1.3 to 1.7. chakra-ui/chakra-ui#4226 (comment).

For a workaround, I have removed the ThemeOverride type for overrides - commit

[payapula]

Hi @ruansenadev

I am not quite sure what is the issue you are facing. I am guessing it's related to the type of theme we are passing to extendTheme function and tsconfig.

I didn't face any issue with chara-ui theme being displayed when I write code. If you give an example I will check if it's happening for me or not.

Thank you.