GithubHelp home page GithubHelp logo

sozonome / nextarter-chakra Goto Github PK

View Code? Open in Web Editor NEW
793.0 4.0 99.0 2.89 MB

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

Home Page: https://nextarter-chakra.sznm.dev/

License: MIT License

TypeScript 92.71% CSS 0.19% JavaScript 7.10%
nextjs chakra-ui typescript boilerplate boilerplate-template nextjs-template nextjs-starter nextjs-boilerplate template react starter-template

nextarter-chakra's Issues

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?

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;

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"'

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.

Dependency Dashboard

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

Warning

These dependencies are deprecated:

Datasource Name Replacement PR?
npm standard-version Available

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, framer-motion, husky, lint-staged, standard-version)

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.13.0
  • @emotion/styled ^11.13.0
  • framer-motion ^11.3.18
  • next ^14.2.5
  • next-pwa ^5.6.0
  • react ^18.3.1
  • react-dom ^18.3.1
  • react-icons ^5.2.1
  • @commitlint/cli ^19.3.0
  • @playwright/test ^1.45.3
  • @types/react ^18.3.3
  • commitizen ^4.3.0
  • cross-env ^7.0.3
  • eslint ^8.57.0
  • eslint-config-next ^14.2.5
  • eslint-config-sznm ^2.0.3
  • husky ^9.1.3
  • lint-staged ^15.2.7
  • next-sitemap ^4.2.3
  • prettier ^3.3.3
  • standard-version ^9.5.0
  • typescript ^5.5.4
  • Check this box to trigger a request for Renovate to run again on this repository

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.