Next 14 with Keystone Build Error <Html> should not be imported #9239
Description
The Problem
Here in My Repo I get an error when executing yarn keystone build for a production build.
This came about when upgrading my dependency from NextJS 13 to NextJS 14. (I want to use NextJS 14 for this project)
What I Tried
Building the next app with yarn next build works with no problems. I'm not using any ./pages/_document.js. I am using the Next App Router for my project, but I do setup a couple routes like /pages/api/gpl/protected.ts in the pages directory as per the keystone example
I assumed the error was library react-email causing the issue as one of its imports is named <Html> so I now import all of those as import { Html as EmailHtml } from "@react-email/components". This did not fix the issue.
Keystone Error Message
$ keystone build
✨ Generated GraphQL and Prisma schemas
✨ Generating Admin UI code
✨ Building Admin UI
Skipping validation of types
Skipping linting
We detected TypeScript in your project and created a tsconfig.json file for you.
✓ Creating an optimized production build
✓ Compiled successfully
✓ Collecting page data
Generating static pages (0/70) [ ]Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page
at Z (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:5430)
at Html (/Volumes/edata/nextcloud/webdev/cutefruit/.keystone/admin/.next/server/chunks/3879.js:6:1327)
at Wc (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
at Zc (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
at Z (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
at Xc (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:409)
at Zc (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:210)
at Z (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
at Zc (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:74:209)
at Z (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
...
✓ Generating static pages (70/70)
ExportError: Export encountered errors on following paths:
/
/_error: /404
/_error: /500
/addons
/addons/[id]
/addons/create
... [ALL OTHER PAGES]
...
at async Object.build (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/@keystone-6/core/node_modules/next/dist/build/index.js:185:29)
at async build (/Volumes/edata/nextcloud/webdev/cutefruit/node_modules/@keystone-6/core/scripts/cli/dist/keystone-6-core-scripts-cli.cjs.dev.js:525:3) {
code: 'NEXT_EXPORT_ERROR'
}Packages
I assume this has something to do with some packages fighting each other
package.json
{
"name": "kypn",
"version": "0.2.0",
"private": true,
"scripts": {
"email": "email dev --dir src/emails -p 3002",
"ks:dev": "keystone dev",
"ks:build": "keystone build",
"ks:start": "keystone start",
"n:dev": "next dev -p 3000",
"n:build": "next build",
"generate": "keystone prisma generate",
"postinstall": "keystone build --no-ui --frozen",
"build": "NODE_ENV=production yarn keystone build --no-ui && NODE_ENV=production yarn next build",
"start": "next start",
"lint": "next lint --no-cache"
},
"dependencies": {
"@keystone-6/auth": "^8.0.0",
"@keystone-6/core": "^6.1.0",
"@keystone-6/document-renderer": "^1.1.2",
"@keystone-6/fields-document": "^9.0.0",
"@prisma/client": "^5.17.0",
"@react-email/button": "0.0.15",
"@react-email/components": "^0.0.21",
"@react-email/html": "0.0.8",
"@react-email/render": "^0.0.16",
"@stripe/react-stripe-js": "^2.4.0",
"@stripe/stripe-js": "^4.1.0",
"add-to-calendar-button-react": "^2.4.3",
"bcryptjs": "^2.4.3",
"dotenv": "^16.3.1",
"encoding": "^0.1.13",
"fp-ts": "^2.16.8",
"googleapis": "^140.0.1",
"jsonwebtoken": "^9.0.2",
"leaflet": "^1.9.4",
"lightgallery": "^2.7.2",
"next": "^14.2.0",
"next-auth": "^4.23.2",
"nodemailer": "^6.9.6",
"qrcode.react": "^3.1.0",
"react": "^18.3.1",
"react-calendar": "^5.0.0",
"react-dom": "^18.3.1",
"react-email": "2.1.5",
"react-icons": "^5.2.1",
"react-leaflet": "^4.2.1",
"react-slick": "^0.30.2",
"sass": "^1.69.5",
"slick-carousel": "^1.8.1",
"stripe": "^16.2.0"
},
"devDependencies": {
"@aws-sdk/signature-v4-multi-region": "^3.437.0",
"@graphql-typed-document-node/core": "^3.2.0",
"@types/node": "^20.14.10",
"@types/nodemailer": "^6.4.14",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"prisma": "^5.17.0",
"typescript": "^4",
"eslint": "^8",
"eslint-config-next": "14.2.5"
}
}Playing with Packages
Thinking it had to do with something about lint or typescript I removed those packages, updated with yarn, but still ran into the same issues
// Removed these packages
"eslint": "^8",
"eslint-config-next": "14.2.5"Moving back to Next 13
I changed my next dependencies back to 13 and the build was successful again (I kept everything else the same as above in package.json
"dependencies": {
"next": "^13",
},
"devDependencies": {
"eslint-config-next": "13"
}build step
$ keystone build
✨ Generated GraphQL and Prisma schemas
✨ Generating Admin UI code
✨ Building Admin UI
Skipping validation of types
Skipping linting
We detected TypeScript in your project and created a tsconfig.json file for you.
✓ Creating an optimized production build
✓ Compiled successfully
✓ Collecting page data
✓ Generating static pages (70/70)
✓ Collecting build traces
✓ Finalizing page optimization
...
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
✨ Done in 44.01s.Related Form Questions
I attempted these other resolutions with no luck
- https://stackoverflow.com/questions/69061240/nextjs-importing-next-document-outside-of-pages-document-error/69061535#69061535
- https://stackoverflow.com/questions/78162676/error-html-should-not-be-imported-outside-of-pages-document
Environment
node -v
v20.16.0
yarn -v
1.22.22
MacBook Pro
Apple M1 Pro
Sonoma 14.5