■環境

・windows11
・Node.js (v18.12.1)
・Nextron (8.19.2)

■Nextronとは

Electron + Next.jsのビルドの諸々の設定を行ってくれるライブラリ。
これを使わないと、割と最初の設定が面倒らしい。

■Electron + Next.jsのプロジェクト作成

npx create-nextron-app my-app --example basic-typescript
cd my-app
npm install nextron@latest
npm run build
npm run dev

デスクトップアプリが起動しました！
Devtoolもちゃんと使えてます。

■Chakra UIの導入

1.Chakra UIに必要なパッケージのinstall

npm install -D @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
npm install -D @chakra-ui/icons /*アイコンも利用したい場合はこちらもinstall*/

2. ChakraProviderのセットアップ

・pages配下に_app.tsxを作成
_app.tsx: すべてのコンポーネントの初期化に使われるコンポーネント

import { ChakraProvider } from '@chakra-ui/react';
import { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps): JSX.Element {
    return (
        <ChakraProvider>
            <Component {...pageProps} />
        </ChakraProvider>
    );
}

3. Chakra UI のButtonコンポーネントを置いてみる

import React from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { Button, Stack } from '@chakra-ui/react';

function Home() {
  return (
    <React.Fragment>
      <Head>
        <title>Home - Nextron (with-typescript)</title>
      </Head>
      <div>
        <p>
          ⚡ Electron + Next.js ⚡ -
          <Link href="/next">
            <a>Go to next page</a>
          </Link>
        </p>
        <img src="/images/logo.png" />
        <Stack spacing={4} direction='row' align='center'>
          <Button colorScheme='teal' size='xs'>
            Button
          </Button>
          <Button colorScheme='teal' size='sm'>
            Button
          </Button>
          <Button colorScheme='teal' size='md'>
            Button
          </Button>
          <Button colorScheme='teal' size='lg'>
            Button
          </Button>
        </Stack>
      </div>
    </React.Fragment>
  );
};

export default Home;

下記のエラーが発生。

Server Error
SyntaxError: Named export 'motion' not found. The requested module 'framer-motion' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'framer-motion';
const { motion, useIsPresent } = pkg;

どうやらChakra UIのVersionに相性の問題があるっぽい。

私の別プロジェクトでしているバージョンにpackage.jsonの設定を変更することで、とりあえず正常に動くようになりました...!

"@chakra-ui/icons": "^2.0.15",
"@chakra-ui/react": "^2.4.6",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"framer-motion": "^6.5.1",