How to use Chakra UI?

I would like to use Chakra UI with my react-static application. I created a new react-static app and followed the instructions at:

https://chakra-ui.com/docs/getting-started

I installed the dependencies:

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Then I added the ChakraProvider to index.tsx:

  const render = (Comp: Function) => {
    renderMethod(
        <ChakraProvider>
            <AppContainer>
                <Comp />
            </AppContainer>
        </ChakraProvider>,
      target
    )
  }

When building I got the error:

Running plugins...
[❌] Application bundling failed
/home/ldlework/src/ldlework-static/node_modules/framer-motion/dist/es/components/AnimateSharedLayout/utils/batcher.js 35:28-41
"export '__spreadArray' was not found in 'tslib'
 @ /home/ldlework/src/ldlework-static/node_modules/framer-motion/dist/es/index.js
 @ /home/ldlework/src/ldlework-static/node_modules/@chakra-ui/transition/dist/esm/collapse.js
 @ /home/ldlework/src/ldlework-static/node_modules/@chakra-ui/transition/dist/esm/index.js
 @ /home/ldlework/src/ldlework-static/node_modules/@chakra-ui/react/dist/esm/index.js
 @ /home/ldlework/src/ldlework-static/src/index.tsx
 @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js /home/ldlework/src/ldlework-static/src/index.tsx
/home/ldlework/src/ldlework-static/node_modules/framer-motion/dist/es/components/AnimateSharedLayout/utils/batcher.js 35:42-55
"export '__spreadArray' was not found in 'tslib'
 @ /home/ldlework/src/ldlework-static/node_modules/framer-motion/dist/es/index.js
 @ /home/ldlework/src/ldlework-static/node_modules/@chakra-ui/transition/dist/esm/collapse.js
 @ /home/ldlework/src/ldlework-static/node_modules/@chakra-ui/transition/dist/esm/index.js
 @ /home/ldlework/src/ldlework-static/node_modules/@chakra-ui/react/dist/esm/index.js
 @ /home/ldlework/src/ldlework-static/src/index.tsx
 @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js /home/ldlework/src/ldlework-static/src/index.tsx
/home/ldlework/src/ldlework-static/node_modules/framer-motion/dist/es/render/index.js 280:21-34

In googling, I found this error was due to old TS lib, so I updated both typescript and tslib:

yarn add -D typescript@4.2.4 
yarn add tslib@2.2.0

This allowed the site to build but at runtime in the browser I get:

Uncaught SyntaxError: Unexpected token '['
    at eval (<anonymous>)
    at ES6ProxyComponentFactory (react-hot-loader.development.js:341)
    at createClassProxy (react-hot-loader.development.js:814)
    at updateProxyById (react-hot-loader.development.js:1301)
    at Object.register (react-hot-loader.development.js:2849)
    at register (motion.js:84)
    at Module.../../framer-motion/dist/es/index.js (motion.js:86)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Module.../../@chakra-ui/transition/dist/esm/index.js (index.js:44)

How can Chakra UI be made to work with react-static? Any guidance is appreciated.

[keithrpotempa]

I got a fresh typescript react-static create with Chakra UI running and wanted to post my steps here for posterity. FWIW, I didn’t encounter the error the original poster described.

Steps to reproduce:

1. react-static create (choose typescript)
2. yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

• Note: the version of framer-motion here differs from earlier posts, but this is what is currently noted in chakra ui’s docs

1. Add ChakraProvider to App.tsx:

   import React from 'react'
   import { Root, Routes, addPrefetchExcludes } from 'react-static'
   import { Link, Router } from '@reach/router'
   import FancyDiv from 'components/FancyDiv'
   import Dynamic from 'containers/Dynamic'
   import { ChakraProvider } from "@chakra-ui/react"
   
   import './app.css'
   
   // Any routes that start with 'dynamic' will be treated as non-static routes
   addPrefetchExcludes(['dynamic'])
   
   function App() {
     return (
       <ChakraProvider>
         <Root>
           <nav>
             <Link to="/">Home</Link>
             <Link to="/about">About</Link>
             <Link to="/blog">Blog</Link>
             <Link to="/dynamic">Dynamic</Link>
           </nav>
           <div className="content">
             <FancyDiv>
               <React.Suspense fallback={<em>Loading...</em>}>
                 <Router>
                   <Dynamic path="dynamic" />
                   <Routes path="*" />
                 </Router>
               </React.Suspense>
             </FancyDiv>
           </div>
         </Root>
       </ChakraProvider>
     )
   }
   
   export default App
   

2. Add node.api.js file

   • At this point, running the app with npm: start got the following error for various different framer-motion exports:

     ERROR in /Users/kpotempa/workspace/my-static-site/node_modules/framer-motion/dist/es/utils/use-cycle.mjs 45:47-51
     Can't import the named export 'wrap' from non EcmaScript module (only default export is available)
     

   • Resolved by adding the following node.api.js file at root:

     export default (pluginOptions) => ({
       webpack: (config) => {
         config.module.rules.push({
           test: /\.mjs$/,
           include: /node_modules/,
           type: "javascript/auto",
         });
         return config;
       },
     });
     

At that point, it bundled without errors and Chakra UI example components I added worked in the browser without any console errors.

Hope this is useful!

[SleeplessByte]

Alright. So same issue as original poster. This error is a better error tho.

I don’t know if Chakra UI is compatible with SSR. It doesn’t use SSR in debug, but does in production/build. Here it’s trying to SSR and that fails. Perhaps @RodrigoPrior has more information.