Replies: 22 comments 98 replies
-
Hi, Could you share more about the page you are trying to build? The build step has a bit of a strict rule regarding the type signature of the exported default page. I need to see what you have to be able to give you a code fix. |
Beta Was this translation helpful? Give feedback.
-
If its urgent to build and you want to ignore the errors for now, then please follow the things stated in the docs link : (pasting snippet for convenience)
|
Beta Was this translation helpful? Give feedback.
-
@icyJoseph hey I'm facing this error when i try to run npm run build: 26 |
|
Beta Was this translation helpful? Give feedback.
-
@icyJoseph Hey! Mind helping me out too? I'm a new to all of this.
here's the layout of the specific area:
not sure which file is the problem so i gave both |
Beta Was this translation helpful? Give feedback.
-
Hey @icyJoseph ! i too find this issue in my application while building. please suggest Linting and checking validity of types ...Failed to compile. .next/types/app/component/MenuItem/page.ts:28:13 |
Beta Was this translation helpful? Give feedback.
-
// Example component with correct typing import Link from "next/link"; interface MenuItemProps { interface MyComponentProps { //type OmitWithTag<T, K, Tag extends string = 'default'> = Omit<T, K & keyof T> & { [key in Tag]: never }; //const MenuItem: React.FC = ({ menuItem }) => { //type OmitWithTag<T, K, Tag extends string = 'default'> = Omit<T, K & keyof T> & { [key in Tag]: never }; const MenuItem: React.FC<{ menuItem: MenuItemProps; }> = ({ menuItem }) => { const [menuItems, setMenuItems] = useState<MenuItemProps[]>([]); useEffect(() => {
}, [mid]); const [isExpanded, toggleExpanded] = useState(false); const onClick = () => { return ( {icon && ( <> {icon === "Dashboard" && } {icon === "ShoppingCart" && } {icon === "People" && } {icon === "AttachMoney" && } {icon === "AddShoppingCart" && } {icon === "Done" && } {icon === "Business" && } {icon === "HomeWork" && } {icon === "Person" && } </> )} {name} {isNested ? : null} {isExpanded && isNested ? : null} </> ); }; export default MenuItem; |
Beta Was this translation helpful? Give feedback.
-
Hey @icyJoseph i get below error when i start npm start after the build i also added -> ...(process.env.NODE_ENV === "development" ? { trustHost: true } : {}), in auth [auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session. Read more at https://errors.authjs.dev#untrustedhost |
Beta Was this translation helpful? Give feedback.
-
In my case I had this interface PropTypes {
children: React.ReactNode
}
export default function Page(props: PropTypes) {
return (
<>{props.children}</>
)
} I changed it to export default function RootPage() {
return <></>
} I think that happens because children property is received by the layout and not the page, but I'm not sure |
Beta Was this translation helpful? Give feedback.
-
### my problem was this! PS C:\Users\Prince Raj\Desktop\nextjs project\app-dashboard> yarn run build
Creating an optimized production build ... .next/types/app/admin/sidebar/page.ts:28:13 26 |
**
** // sidebar for admin // Adjusted type definition const drawerWidth = 240; export default function Layouts(props: Props) { const handleDrawerClose = () => { const handleCollapse = (event: React.MouseEvent) => { const handleDrawerTransitionEnd = () => { const handleDrawerToggle = () => { const router = useRouter(); useEffect(() => { const handleLogout = () => {
}; const drawer = ( APP-DASHBOARD {["Dashboard", "Profile", "AstrologyService", "PujaService"].map( (text, index) => ( <Link href={ /admin/${text.toLowerCase()} } key={text}><ListItem disablePadding className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > <ListItemIcon className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > {index % 2 === 0 ? : } ) )} <ListItem disablePadding onClick={handleCollapse} className={ pathname.startsWith("/setting") ? "text-sky-600 bg-slate-100" : "text-slate-700" } > <ListItemIcon className={ pathname.startsWith("/setting") ? "text-sky-600 bg-slate-100" : "text-slate-700" } > {isCollapse ? : } {["Support", "Change-Password", "Contact"].map((text, index) => ( <Link href={ /admin/${text.toLowerCase()} } key={text}><ListItem disablePadding className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > <ListItemIcon className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > {index % 2 === 0 ? : } ))} ); const container = undefined; return ( ); } ### my solution code: // sidebar for admin // Adjusted type definition const drawerWidth = 240; export default function Layouts(props: any) { const handleDrawerClose = () => { const handleCollapse = (event: React.MouseEvent) => { const handleDrawerTransitionEnd = () => { const handleDrawerToggle = () => { const router = useRouter(); useEffect(() => { const handleLogout = () => {
}; const drawer = ( APP-DASHBOARD {["Dashboard", "Profile", "AstrologyService", "PujaService"].map( (text, index) => ( <Link href={ /admin/${text.toLowerCase()} } key={text}><ListItem disablePadding className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > <ListItemIcon className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > {index % 2 === 0 ? : } ) )} <ListItem disablePadding onClick={handleCollapse} className={ pathname.startsWith("/setting") ? "text-sky-600 bg-slate-100" : "text-slate-700" } > <ListItemIcon className={ pathname.startsWith("/setting") ? "text-sky-600 bg-slate-100" : "text-slate-700" } > {isCollapse ? : } {["Support", "Change-Password", "Contact"].map((text, index) => ( <Link href={ /admin/${text.toLowerCase()} } key={text}><ListItem disablePadding className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > <ListItemIcon className={ pathname.startsWith("/" + text.toLowerCase()) ? "text-sky-600 bg-slate-100" : "text-slate-700" } > {index % 2 === 0 ? : } ))} ); const container = undefined; return ( ); } |
Beta Was this translation helpful? Give feedback.
-
Olá, boa tarde, estava com esse mesmo erro, ao alterar o nome dos arquivos que estão como page.tsx/js/ts o erro é resolvido, porém ao tentar exacutar o projeto, seja com o build ou dev, a aplicação não reconhece o arquivo como uma page por não estar entitulado como page, analisando a doc do next, ele solicita a extruturação como page. porém seguindo a documentação eu acabo esbarrando neste erro que estamos apresentado no topico. |
Beta Was this translation helpful? Give feedback.
-
Hi @icyJoseph , I’m currently facing a deployment issue with my Azure Static Web App. The application was working perfectly fine until I added one more page. Now, I’m encountering the following error during deployment:
Here are the details of what I’ve tried so far: Verified that the maximum size limit on Azure is set to 500MB, so it shouldn’t be a size issue.
The issue has broken my production environment, and I’d really appreciate it if someone could help me resolve this. Thank you in advance! package.json: {
"name": "rewriterpro_nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emailjs/browser": "^3.11.0",
"@headlessui/react": "^0.0.0-insiders.043edb8",
"@heroicons/react": "^2.0.18",
"@next/third-parties": "^14.1.3",
"@react-oauth/google": "^0.12.1",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"@types/jest": "^27.5.2",
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"axios": "^1.6.7",
"chatgpt": "^5.2.5",
"crypto-browserify": "^3.12.0",
"firebase": "^10.6.0",
"next": "^14.1.1",
"nextjs-toploader": "^1.6.12",
"nprogress": "^0.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-firebase-hooks": "^5.1.1",
"react-google-button": "^0.7.2",
"react-minimal-pie-chart": "^8.4.0",
"react-social-login-buttons": "^3.9.1",
"rewriterpro_nextjs": "file:",
"stream-browserify": "^3.0.0",
"stripe": "^12.10.0",
"txtgen": "^3.0.6",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8.57.0",
"eslint-config-next": "14.1.1",
"eslint-config-prettier": "^9.1.0",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
} next config /** @type {import('next').NextConfig} */
const nextConfig = {
};
export default nextConfig; name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v3
with:
submodules: true
lfs: false
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_BUSH_0AF2C3D10 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "" # Api source code path - optional
output_location: ".next" # Built app content directory - optional
app_build_command: 'yarn run build'
api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'
env: # Put a node version on the following line
NODE_VERSION: 20
NEXT_PUBLIC_GOOGLE_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_ID }}
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET: ${{ secrets.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET}}
NEXT_PUBLIC_OPEN_AI_API_KEY: ${{ secrets.NEXT_PUBLIC_OPEN_AI_API_KEY}}
NEXT_PUBLIC_WEBSITE_HTTPLOGGING_RETENTION_DAYS: ${{ secrets.NEXT_PUBLIC_WEBSITE_HTTPLOGGING_RETENTION_DAYS}}
NEXT_PUBLIC_PRODUCT_ID: ${{ secrets.NEXT_PUBLIC_PRODUCT_ID}}
NEXT_PUBLIC_ENV: ${{ secrets.NEXT_PUBLIC_ENV}}
NEXT_PUBLIC_ATLAS_DATA_API_KEY: ${{ secrets.NEXT_PUBLIC_ATLAS_DATA_API_KEY }}
NEXT_PUBLIC_EMAILJS_SERVICE_ID: ${{ secrets.NEXT_PUBLIC_EMAILJS_SERVICE_ID }}
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID: ${{ secrets.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID }}
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID_CONTACT_FORM: ${{ secrets.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID_CONTACT_FORM }}
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY: ${{ secrets.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY }}
NEXT_PUBLIC_STRIPE_SECRET_KEY_PROD: ${{ secrets.NEXT_PUBLIC_STRIPE_SECRET_KEY_PROD }}
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
app_location: "/"
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_BUSH_0AF2C3D10 }}
action: "close"
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Here - https://github.com/vijayluxmimaddheshiya/Event_Hub_IGDTUW/tree/main and for page Props - |
Beta Was this translation helpful? Give feedback.
-
Hi @icyJoseph "use client"; interface GuestPageProps { const { toast } = useToast(); const { reset, handleSubmit, control } = methods; const checkForEdit = async () => { useEffect(() => { async function handleFormSubmit(values: z.infer) { const addGuest = async (guestData: any) => { const updateGuest = async (guestData: any) => { return ( GuestGuest Guest Details Save
); |
Beta Was this translation helpful? Give feedback.
-
Hi @icyJoseph , On vs code terminal i don't get this error and it runs successfully. |
Beta Was this translation helpful? Give feedback.
-
Hi @icyJoseph 32 |
|
Beta Was this translation helpful? Give feedback.
-
i fix my issue with just adding a promise on my interface/types interface ProjectDetailPageProps { export default async function ProjectDetailPage({ params }: ProjectDetailPageProps) { like this |
Beta Was this translation helpful? Give feedback.
-
please help me for following issue: .next/types/app/[retailerdomain]/layout.ts:34:31 32 |
// the code is below: export default function RetailerLayout({ return ( {children} ) } |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, I am trying to run the BUILD but it returns the error that everyone here is getting. I hope someone can help me to solve it import EditProductForm from "@/components/products/EditProductForm" async function getProductById(id: number) { export default async function EditProductsPage({ params }: { params: { id: string } }) { Edit product: ({product.name}) <Link href={'/admin/products'} className="bg-amber-600 cursor-pointer uppercase font-bold p-[1rem] text-white border-2 border-transparent hover:border-amber-600 hover:bg-transparent hover:text-amber-600 transform transition-all ease-in-out rounded-lg"> Back to Products </> ) } |
Beta Was this translation helpful? Give feedback.
-
Hello everyone, recently we face with a similar problem. Our solution was chage the file´s name. We have defined it like page.tsx, so we changed it for another "tableComponent.tsx" for example. Hope it help someone :) |
Beta Was this translation helpful? Give feedback.
-
I'm trying to build a dynamic social share page in Next.js using the App Router with the route structure /social-share/[type]/[slug]/page.tsx. However, I'm stuck with a persistent type error during the build process related to params and searchParams not matching the expected types. I've tried using correct types, but the error still says params is missing Promise-like properties. Can someone help me properly structure this page and fix the typing issue for a dynamic route like this? error in build: onClick={() => router.push(
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Just installed the latest version of nextjs 14.1.0 as mentioned in the documentation.
Nodejs version - 18.19.1
On executing the command
npm run build
, i get the following error -`▲ Next.js 14.1.0
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions