sozonome / nextarter-chakra

battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript setup ✨

👋 Hi there!

🌐 dev site | 🦜 twitter

---

nextarter-chakra's Issues

Update README to list projects using your template

A nice thing is to update the README to contain a list of projects using your template. For example, mine: https://github.com/lucky-chap/seraph

Cannot add new package

Describe the bug

"Hello there! I have been using this template for a while now and I like it. Recently, I tried to add a new package called 'react-hook-form' but I encountered an error that says 'webpack_imported_module is not a function'. I'm not sure what went wrong so I hope someone can help me with this. Thank you in advance for your assistance!"

Reproduction

https://effective-space-parakeet-7pjg9rvp7j4fpvw.github.dev/

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx
    Memory: 1.34 GB / 9.89 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

i followed your instruction and am facing this problem

I followed your instructions in Readme.md, am facing below problem when i run "yarn dev". please note that after cloning your project i did not do "npm install", still npx command worked to create my project.(petvet)

PS C:\Repository\learnWeb3Dao\r1\UI-Ref\ui_fmt1\petvet> yarn dev
yarn run v1.22.17
$ next dev
'next' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yarn dev returns an error

warning ..\..\..\package.json: No license field
$ next dev
'next' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

However yarn add next fixed this. Is this a problem?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update all dependencies (@commitlint/cli, @playwright/test, @types/react, eslint-config-next, framer-motion, next, react-icons)

Detected dependencies

github-actions

.github/workflows/release-please.yml

.github/workflows/release.yml

.github/workflows/update-license.yml

npm

package.json

• @chakra-ui/next-js ^2.2.0
• @chakra-ui/react ^2.8.2
• @emotion/react ^11.11.4
• @emotion/styled ^11.11.5
• framer-motion ^11.0.27
• next ^14.1.4
• next-pwa ^5.6.0
• react ^18.2.0
• react-dom ^18.2.0
• react-icons ^5.0.1
• @commitlint/cli ^19.2.1
• @playwright/test ^1.43.0
• @types/react ^18.2.75
• commitizen ^4.3.0
• cross-env ^7.0.3
• eslint ^8.57.0
• eslint-config-next ^14.1.4
• eslint-config-sznm ^2.0.3
• husky ^9.0.11
• lint-staged ^15.2.2
• next-sitemap ^4.2.3
• prettier ^3.2.5
• standard-version ^9.5.0
• typescript ^5.4.5

---

• Check this box to trigger a request for Renovate to run again on this repository

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid schedule: 'Invalid schedule: Failed to parse "on Monday every week"'

Help

Hi there:
Can I ask you a code question?
I am a novice,and I can use sequelize or better-sqlite3 to connect a sqlite file.
I can not correct load the db file by any ways.
I created a test.js file like this:

const Database = require("better-sqlite3");
const db = new Database("test.db", {
  verbose: console.log,
});

const search = (keyword) => {
  const searchAction = db.prepare(`select * from demo`);
  const res = searchAction.all();
  console.log(res);
  return res;
};

module.exports = {
  search,
};

I use it in node cli, everything is ok.But I can not take this in api scripts.It can not read any table.
thanks!

Error: Component(...): Nothing was returned from render?

I am using this starter template but without typescript. I have a problem in the _document.js file. I just transformed your _document.js code into normal javascript, but Next.js is throwing the error:

error - Error: Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Do you maybe know what is wrong? Below is my _document.js code. It is identical to yours, just removed typescript. If I remove _document.js then the app renders normally.

import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "/styles/emotionCache";
import Document, {
  Html,
  Head,
  Main,
  NextScript,
} from "next/document";
import * as React from "react";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const originalRenderPage = ctx.renderPage;
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    ctx.renderPage = () =>
      originalRenderPage({
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        enhanceApp: (App) => {
          return (props) => {
            <App emotionCache={cache} {...props} />;
          }
        },
      });

    const initialProps = await Document.getInitialProps(ctx);
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
      <style
        data-emotion={`${style.key} ${style.ids.join(" ")}`}
        key={style.key}
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: style.css }}
      />
    ));

    return {
      ...initialProps,
      styles: [
        ...React.Children.toArray(initialProps.styles),
        ...emotionStyleTags,
      ],
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="application-name" content="Gostinska Oprema" />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta
            name="apple-mobile-web-app-status-bar-style"
            content="default"
          />
          <meta name="apple-mobile-web-app-title" content="Gostinska Oprema" />
          <meta name="format-detection" content="telephone=no" />
          <meta name="mobile-web-app-capable" content="yes" />
          <meta name="theme-color" content="#FFFFFF" />
          <link rel="manifest" href="/manifest.json" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;