■環境
・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",
