As the title says, I have a web app that build and runs fine locally, but gives me a weird error when I build with Vercel (cli or the website). Here's what it normally (and should) look like for reference.
yarn run v1.22.19
warning ../package.json: No license field
warning ../../../package.json: No license field
$ blitz build
Loaded env from /home/sia/Documents/Projects/siarune.dev/.env.local
Loaded env from /home/sia/Documents/Projects/siarune.dev/.env
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Generating route manifest
info - Checking validity of types
info - Using external babel configuration from /home/sia/Documents/Projects/siarune.dev/babel.config.js
info - Creating an optimized production build ...Warning on line 7, column 2 of styles/index.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
info - Creating an optimized production build .Warning on line 7, column 2 of styles/poetry.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
info - Creating an optimized production build ...Warning on line 7, column 2 of styles/index.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
Warning on line 7, column 2 of styles/poetry.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (12/12)
info - Finalizing page optimization
Page Size First Load JS
┌ ○ / 1.55 kB 144 kB
├ └ css/7c5d5e51ff5d6a2b6e33.css 1.25 kB
├ /_app 0 B 139 kB
├ ○ /404 533 B 140 kB
├ └ css/7ca7b9c01475c154bcb8.css 390 B
├ λ /api/rpc/changePassword 0 B 139 kB
├ λ /api/rpc/forgotPassword 0 B 139 kB
├ λ /api/rpc/getCurrentUser 0 B 139 kB
├ λ /api/rpc/login 0 B 139 kB
├ λ /api/rpc/logout 0 B 139 kB
├ λ /api/rpc/resetPassword 0 B 139 kB
├ λ /api/rpc/signup 0 B 139 kB
├ ○ /forgot-password 1.01 kB 140 kB
├ ○ /login 511 B 140 kB
├ ● /projects/gug 2.05 kB 145 kB
├ └ css/f5b237b4dfb47d0b0ae7.css 1.04 kB
├ ○ /projects/lotus 512 B 140 kB
├ ● /projects/maboibart 2.04 kB 144 kB
├ └ css/93e49d8539b077a9cfb3.css 1.04 kB
├ ○ /projects/poetry 2.12 kB 145 kB
├ └ css/18ff7869d4a55b2a91d9.css 1.25 kB
├ ● /projects/sauce (313 ms) 2.04 kB 144 kB
├ └ css/2d34f9f47088b0f00230.css 1.06 kB
├ ○ /reset-password 1.08 kB 140 kB
└ ○ /signup 1.08 kB 140 kB
+ First Load JS shared by all 139 kB
├ chunks/framework.4fa35c.js 44.9 kB
├ chunks/main.8dc89c.js 54.1 kB
├ chunks/pages/_app.6429ea.js 39.3 kB
├ chunks/webpack.70ff54.js 866 B
└ css/d34792e57bbb2b6208a0.css 290 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
Done in 17.80s.
But when I use vercel build it says Build optimization failed: found pages without a React Component as default export in
Vercel CLI 27.2.0
> Loaded env from ".vercel/.env.preview.local"
WARNING: You should not upload the `.next` directory.
Installing dependencies...
yarn install v1.22.19
warning ../package.json: No license field
warning ../../../package.json: No license field
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
success Already up-to-date.
$ prisma generate || true
Environment variables loaded from .env
Prisma schema loaded from db/schema.prisma
✔ Generated Prisma Client (3.16.0-integration-tmp-revert-node14.1 | library) to ./node_modules/@prisma/client in 84ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
Done in 2.70s.
Detected Next.js version: 11.1.0-0.45.4
Running "yarn run build"
yarn run v1.22.19
warning ../package.json: No license field
warning ../../../package.json: No license field
$ blitz build
Loaded env from /home/sia/Documents/Projects/siarune.dev/.env.local
Loaded env from /home/sia/Documents/Projects/siarune.dev/.env
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Generating route manifest
info - Checking validity of types
info - Using external babel configuration from /home/sia/Documents/Projects/siarune.dev/babel.config.js
info - Creating an optimized production build ...Warning on line 7, column 2 of styles/index.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
info - Creating an optimized production build .Warning on line 7, column 2 of styles/poetry.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
info - Creating an optimized production build .Warning on line 7, column 2 of styles/index.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
Warning on line 7, column 2 of styles/poetry.module.sass:
This selector doesn't have any properties and won't be rendered.
╷
7 │ max-height:fit-content
│ ^^^^^^^^^^^^^^^^^^^^^^
╵
info - Creating an optimized production build
info - Compiled successfully
> Build error occurred
Error: Build optimization failed: found pages without a React Component as default export in
pages/projects/gug
pages/projects/maboibart
pages/projects/sauce
See https://nextjs.org/docs/messages/page-without-valid-component for more info.
at /home/sia/Documents/Projects/siarune.dev/node_modules/next/dist/build/index.js:604:19
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Span.traceAsyncFn (/home/sia/Documents/Projects/siarune.dev/node_modules/next/dist/telemetry/trace/trace.js:60:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
All of the files that it says don't have an export clearly do
import Image from 'next/image'
import styles from 'styles/sauce.module.sass'
import chud from "styles/chud.module.sass"
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'
import { promises as fs } from 'fs'
import path from 'path'
import CluckHUD from 'app/core/components/CluckHUD'
export default function sauce({ source }: { source: any }) {
return (
<main className={styles.main}>
<CluckHUD theme={chud.Forest} />
<div className={styles.cont}>
<div className={styles.hentWrap}>
<Image
src="/hentieSolid.png"
alt="bart"
height="100"
width="100"
layout="fixed"
className={styles.portrait}
/>
<h1 className={styles.title}>Whatever This Place Is</h1>
</div>
<div className={styles.content}>
<MDXRemote {...source} components={components} className={styles.mdx} />
</div>
</div>
</main>
);
}
const components = {}
export async function getStaticProps() {
const mdPath = await path.join(process.cwd(), 'public/markdown/sauce.mdx');
const rawMarkdown = await fs.readFile(mdPath, 'utf8');
const postMd = await serialize(rawMarkdown);
return { props: { source: postMd } }
}
