An unexpected error occurred: "Potentially dangerous call to "next-sitemap" issue: https://github.com/iamvishnusankar/next-sitemap/issues/243

in globals.css

:root {
  /* #region  /**=========== Primary Color =========== */
  /* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
  /* list of colors preview https://tailwindcss.com/docs/customizing-colors */
    --tw-color-primary-50: 240 249 255;
    --tw-color-primary-100: 224 242 254;
    --tw-color-primary-200: 186 230 253;
    --tw-color-primary-300: 125 211 252;
    --tw-color-primary-400: 56 189 248;
    --tw-color-primary-500: 14 165 233;
    --tw-color-primary-600: 2 132 199;
    --tw-color-primary-700: 3 105 161;
    --tw-color-primary-800: 7 89 133;
    --tw-color-primary-900: 12 74 110;
    --color-primary-50: rgb(var(--tw-color-primary-50)); /* #f0f9ff */
    --color-primary-100: rgb(var(--tw-color-primary-100)); /* #e0f2fe */
    --color-primary-200: rgb(var(--tw-color-primary-200)); /* #bae6fd */
    --color-primary-300: rgb(var(--tw-color-primary-300)); /* #7dd3fc */
    --color-primary-400: rgb(var(--tw-color-primary-400)); /* #38bdf8 */
    --color-primary-500: rgb(var(--tw-color-primary-500)); /* #0ea5e9 */
    --color-primary-600: rgb(var(--tw-color-primary-600)); /* #0284c7 */
    --color-primary-700: rgb(var(--tw-color-primary-700)); /* #0369a1 */
    --color-primary-800: rgb(var(--tw-color-primary-800)); /* #075985 */
    --color-primary-900: rgb(var(--tw-color-primary-900)); /* #0c4a6e */
  /* #endregion  /**======== Primary Color =========== */

}

if I add a color from colors.css, it report a error.

for example :

:root {
  /* #region  /**=========== Primary Color =========== */
  /* !STARTERCONF Customize these variable, copy and paste from /styles/colors.css for list of colors */
  /* list of colors preview https://tailwindcss.com/docs/customizing-colors */
    --tw-color-primary-50: 240 249 255;
    --tw-color-primary-100: 224 242 254;
    --tw-color-primary-200: 186 230 253;
    --tw-color-primary-300: 125 211 252;
    --tw-color-primary-400: 56 189 248;
    --tw-color-primary-500: 14 165 233;
    --tw-color-primary-600: 2 132 199;
    --tw-color-primary-700: 3 105 161;
    --tw-color-primary-800: 7 89 133;
    --tw-color-primary-900: 12 74 110;
    --color-primary-50: rgb(var(--tw-color-primary-50)); /* #f0f9ff */
    --color-primary-100: rgb(var(--tw-color-primary-100)); /* #e0f2fe */
    --color-primary-200: rgb(var(--tw-color-primary-200)); /* #bae6fd */
    --color-primary-300: rgb(var(--tw-color-primary-300)); /* #7dd3fc */
    --color-primary-400: rgb(var(--tw-color-primary-400)); /* #38bdf8 */
    --color-primary-500: rgb(var(--tw-color-primary-500)); /* #0ea5e9 */
    --color-primary-600: rgb(var(--tw-color-primary-600)); /* #0284c7 */
    --color-primary-700: rgb(var(--tw-color-primary-700)); /* #0369a1 */
    --color-primary-800: rgb(var(--tw-color-primary-800)); /* #075985 */
    --color-primary-900: rgb(var(--tw-color-primary-900)); /* #0c4a6e */
  /* #endregion  /**======== Primary Color =========== */

  .rose {
    --tw-color-primary-50: 255 241 242;
    --tw-color-primary-100: 255 228 230;
    --tw-color-primary-200: 254 205 211;
    --tw-color-primary-300: 253 164 175;
    --tw-color-primary-400: 251 113 133;
    --tw-color-primary-500: 244 63 94;
    --tw-color-primary-600: 225 29 72;
    --tw-color-primary-700: 190 18 60;
    --tw-color-primary-800: 159 18 57;
    --tw-color-primary-900: 136 19 55;
    --color-primary-50: rgb(var(--tw-color-primary-50)); /* #fff1f2 */
    --color-primary-100: rgb(var(--tw-color-primary-100)); /* #ffe4e6 */
    --color-primary-200: rgb(var(--tw-color-primary-200)); /* #fecdd3 */
    --color-primary-300: rgb(var(--tw-color-primary-300)); /* #fda4af */
    --color-primary-400: rgb(var(--tw-color-primary-400)); /* #fb7185 */
    --color-primary-500: rgb(var(--tw-color-primary-500)); /* #f43f5e */
    --color-primary-600: rgb(var(--tw-color-primary-600)); /* #e11d48 */
    --color-primary-700: rgb(var(--tw-color-primary-700)); /* #be123c */
    --color-primary-800: rgb(var(--tw-color-primary-800)); /* #9f1239 */
    --color-primary-900: rgb(var(--tw-color-primary-900)); /* #881337 */
  }

}

Error Message:

(31:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting`

Noticed an issue on some of the linting Github Actions workflows where the jobs unexpectedly failed because prettier was not happy with a change I made to a directory level file.

Ideally, lint-staged should be able to catch these linting issues before CI, but the reason it hasn't been is because the lint pre-commit hook only lints staged files in src/. I think that it makes sense that these work together more harmoniously and do the same thing.

In this PR, I assume users will only want to lint src, though the other possibility is that pre-commit hook simply lints all staged files. Will leave the decision up to you!

console says GET http://localhost:3000/favicon.ico 404 (Not Found) (i didn't edit anythings in src > components > Seo.tsx or public > favicon)

The problem is when i Link to other pages, console says it visiting 404 pages several times.

404.tsx

import * as React from 'react';
import { RiAlarmWarningFill } from 'react-icons/ri';

import Layout from '@/components/layout/Layout';
import ArrowLink from '@/components/links/ArrowLink';
import Seo from '@/components/Seo';

export default function NotFoundPage() {
  return (
    <Layout title='404'>
      <Seo templateTitle='Not Found' />
...

Layout.tsx

import * as React from 'react';

import Header from './Header';

export default function Layout({
  children,
  title,
  prevUrl,
}: {
  children: React.ReactNode;
  title: string;
  prevUrl?: string;
}) {
  return (
    <>
      <Header title={title} prevUrl={prevUrl} />
      <section className='min-h-full'>{children}</section>
...

Header.tsx

export default function Header({
  title,
  prevUrl,
}: {
  title: string;
  prevUrl?: string;
}) {
console.log(title, prevUrl)
...

When i navigate to other pages console says like below.

Hi Theodorus,

I am trying to add a tooltip for icon in the Input component, the library used is @tippyjs/react

import Tippy from '@tippyjs/react';
import clsx from 'clsx';
import * as React from 'react';
import { RegisterOptions, useFormContext } from 'react-hook-form';
import { HiExclamationCircle } from 'react-icons/hi';

export type InputProps = {
  /** Input label */
  label: string;
  /**
   * id to be initialized with React Hook Form,
   * must be the same with the pre-defined types.
   */
  id: string;
  /** Input placeholder */
  placeholder?: string;
  /** Small text below input, useful for additional information */
  helperText?: string;
  /**
   * Input type
   * @example text, email, password
   */
  type?: React.HTMLInputTypeAttribute;
  /** Disables the input and shows defaultValue (can be set from React Hook Form) */
  readOnly?: boolean;
  /** Disable error style (not disabling error validation) */
  hideError?: boolean;
  /** Manual validation using RHF, it is encouraged to use yup resolver instead */
  validation?: RegisterOptions;
} & React.ComponentPropsWithoutRef<'input'>;

export default function Input({
  label,
  placeholder = '',
  helperText,
  id,
  type = 'text',
  readOnly = false,
  hideError = false,
  validation,
  ...rest
}: InputProps) {
  const {
    register,
    formState: { errors },
  } = useFormContext();



  return (
    <div>
      <label htmlFor={id} className='block text-sm font-normal text-gray-700'>
        {label}
      </label>
      <div className='relative mt-1'>
        <input
          {...register(id, validation)}
          {...rest}
          type={type}
          name={id}
          id={id}
          readOnly={readOnly}
          className={clsx(
            readOnly
              ? 'bg-gray-100 focus:ring-0 cursor-not-allowed border-gray-300 focus:border-gray-300'
              : errors[id]
              ? 'focus:ring-red-500 border-red-500 focus:border-red-500'
              : 'focus:ring-primary-500 border-gray-300 focus:border-primary-500',
            'block w-full rounded-md shadow-sm'
          )}
          placeholder={placeholder}
          aria-describedby={id}
        />

        {!hideError && errors[id] && (
          
          <div  className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
              <Tippy content="Hello">
                <HiExclamationCircle  className='text-xl text-red-500' />
              </Tippy>
          </div>
          
        )}
      </div>
      <div className='mt-1'>
        {/* {helperText && <p className='text-xs text-red-500'>{helperText}</p>} */}
        {!hideError && errors[id] && (
          // <span className='text-sm text-red-500'>{errors[id].message}</span>
          <span className='text-sm text-red-500'>error</span>
        )}
      </div>
    </div>
  );
}

is this the right way to use tippy?

        {!hideError && errors[id] && (
          <div  className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
              <Tippy content="Hello">
                <HiExclamationCircle  className='text-xl text-red-500' />
              </Tippy>
          </div>
        )}

Hi Theodorus,

I am trying to pass a isLandscape hook to children, but got stuck. here is what I have wrote

// Layout.tsx

import clsx from 'clsx';
import * as React from 'react';
import { useMediaQuery } from 'react-responsive';

import Footer from '@/components/layout/Footer';
import Header from '@/components/layout/Header';


const defaultLayout = {
  switch: false,
};

type LayoutProps = {
  templateTitle?: string;
  children: React.ReactNode;
} & Partial<typeof defaultLayout>;

export default function Layout(props: LayoutProps) {
  const m = {
    ...defaultLayout,
    ...props,
  };

const isLandscape = useMediaQuery({ query: '(orientation: landscape)' });

return (
       <div>
               <Header landscape={isLandscape}/>
               {m.children}
               <Footer landscape={isLandscape}/>
      </div>
  );
}

How can I pass the isLandscape hook to children?

I'm getting this error whenever I try to add Tailwindcss to my Nextjs project initiated with "create-next-app --typescript". Therefore I wanted to try your template but now having the exact same issue.

I have tried installing types for 'accepts' using "yarn add @types/accepts" but then it shows the same error for "body-parser" and keeps going on and on and telling me to add types for different packages which are unknown to me.

Do you know why is this happening?

🚨 Your current dependencies have known security vulnerabilities 🚨

This dependency update fixes known security vulnerabilities. Please see the details below and assess their impact carefully. We recommend to merge and deploy this as soon as possible!

Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ next (12.0.4 → 12.0.7) · Repo

Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

🚨 Your current dependencies have known security vulnerabilities 🚨

This dependency update fixes known security vulnerabilities. Please see the details below and assess their impact carefully. We recommend to merge and deploy this as soon as possible!

Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ next (11.0.1 → 11.1.0) · Repo

Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

This is your weekly update of all Yarn dependencies. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ @svgr/webpack (6.3.1 → 6.5.1, minor) · Repo · Changelog · Release · Diff

✳️ @typescript-eslint/eslint-plugin (5.38.1 → 5.41.0, minor) · Repo · Changelog · Release · Diff

✳️ @typescript-eslint/parser (5.38.1 → 5.41.0, minor) · Repo · Changelog · Release · Diff

✳️ eslint (8.24.0 → 8.26.0, minor) · Repo · Changelog · Release · Diff

✳️ react-icons (4.4.0 → 4.6.0, minor) · Repo · Release · Diff

✳️ tailwind-merge (1.6.1 → 1.7.0, minor) · Repo · Release · Diff

✳️ tailwindcss (3.1.8 → 3.2.1, minor) · Repo · Changelog · Release · Diff

✳️ @types/react (18.0.21 → 18.0.24, patch) · Repo

✳️ autoprefixer (10.4.12 → 10.4.13, patch) · Repo · Changelog · Release · Diff

✳️ postcss (8.4.17 → 8.4.18, patch) · Repo · Changelog · Release · Diff

Depfu will only send you the next scheduled PR once you merge or close this one.

Whenever we commit to GIT locally using this repo, the commit takes a really, really long time, say 2 minutes. I believe this has something to do with husky, but I'm not sure, as I don't understand husky at all or what other pre-commit checks are done here. Removing husky from the package.json didn't seem to help either. Anyway, any idea what we can do to speed up the commits?

This is your weekly update of all Yarn dependencies. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ @typescript-eslint/eslint-plugin (5.47.1 → 5.48.0, minor) · Repo · Changelog · Release · Diff

✳️ @typescript-eslint/parser (5.47.1 → 5.48.0, minor) · Repo · Changelog · Release · Diff

✳️ eslint (8.30.0 → 8.31.0, minor) · Repo · Changelog · Release · Diff

✳️ eslint-config-prettier (8.5.0 → 8.6.0, minor) · Repo · Changelog · Diff

✳️ postcss (8.4.20 → 8.4.21, patch) · Repo · Changelog · Release · Diff

Depfu will only send you the next scheduled PR once you merge or close this one.

Hi!

Due to the app directory is still in beta, I won't migrate the starter. I will immediately migrate it after the appDir is stable and out of beta 👍. The same goes for next-font.

Otherwise, the new Image and Link component is already migrated.

Thanks for using this starter!

When upgraded to next 13 with app directory, SVGR webpack config needs to be migrated to SWC

https://github.com/vercel/next.js/discussions/33161#discussioncomment-2082895