EnvironmentProvider breaks SSR for Next.js

🐛 Bug report

After upgrading from @chakra-ui/react@1.5.0 to @chakra-ui/react@1.5.1, the server side render in Next.js results in a single <span></span>.

Likely point of introduction: https://github.com/chakra-ui/chakra-ui/commit/81a40231f12461dcca0fa0cd3c4e9e2c0497a04d

💥 Steps to reproduce

1. Go to https://lyhzc.sse.codesandbox.io/
2. Open dev tools and disable JS
3. Refresh the page
4. Observe that the DOM contains <div id="__next"><span></span></div>

Alternatively

1. http https://lyhzc.sse.codesandbox.io/ | tidy -xml
2. Observe the same error

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/infallible-bardeen-lyhzc?file=/pages/_app.js

🧐 Expected behavior

Server render should return the expected html content.

🧭 Possible Solution

Only just starting to dig into this, but it looks like the default environment needs to be more sophisticated can relying on canUseDOM().

Interestingly, providing any old string as the environment seems to prevent the issue from occurring i.e.

<ChakraProvider environment="...">
  <MyApp />
</ChakraProvider>

🌍 System information

Software	Version(s)
Chakra UI	1.5.1
Browser	Chrome 89.0.4389.128
Operating System	macOS 10.15.6

📝 Additional information

[JClackett]

Also just getting this now:

Warning: Did not expect server HTML to contain a <div> in <div>. span EnvironmentProvider@webpack-internal:///../../node_modules/@chakra-ui/react-env/dist/esm/env.js:36:7 ColorModeProvider@webpack-internal:///../..

Will try and get a repro too

[segunadebayo]

This has been fixed and we’re releasing an update shortly