Build error with Keystone v5 – #keystonejs/app-next with Heroku CLI - heroku

Question

I'm having issues trying to upload a website using this Keystone v5 + Next.js and everything runs well at dev and even builds locally: Styled-components + Styled-system, SSR and .babelrc (for styled-components config), also next.config.js (for jsconfig.json). But at the time that I do this line of code, using Heroku CLI it chash after everything upload
command line
git push heroku develop:master
doing it that way due I'm testing at develop branch from origin repo.
Heroku log
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: YARN_PRODUCTION=true
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote: NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 12.12.0
remote: engines.npm (package.json): unspecified (use default)
remote: engines.yarn (package.json): 1.22.4
remote:
remote: Resolving node version 12.12.0...
remote: Downloading and installing node 12.12.0...
remote: Using default npm version: 6.11.3
remote: Resolving yarn version 1.22.4...
remote: Downloading and installing yarn (1.22.4)...
remote: Installed yarn 1.22.4
remote:
remote: -----> Installing dependencies
remote: Installing node modules (yarn.lock)
remote: yarn install v1.22.4
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: info fsevents#2.1.3: The platform "linux" is incompatible with this module.
remote: info "fsevents#2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
remote: info fsevents#1.2.13: The platform "linux" is incompatible with this module.
remote: info "fsevents#1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
remote: [3/4] Linking dependencies...
remote: warning " > graphql-tag#2.10.3" has unmet peer dependency "graphql#^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
remote: warning "#keystonejs/fields > #apollo/react-hooks#3.1.5" has unmet peer dependency "#types/react#^16.8.0".
remote: warning "#keystonejs/fields > slate#0.47.9" has unmet peer dependency "immutable#>=3.8.1 || >4.0.0-rc".
remote: warning "#keystonejs/fields > slate-react#0.22.10" has unmet peer dependency "immutable#>=3.8.1 || >4.0.0-rc".
remote: warning "react-apollo > #apollo/react-common#3.1.4" has unmet peer dependency "#types/react#^16.8.0".
remote: warning "react-apollo > #apollo/react-common#3.1.4" has unmet peer dependency "apollo-utilities#^1.3.2".
remote: warning "react-apollo > #apollo/react-common#3.1.4" has unmet peer dependency "graphql#^14.3.1".
remote: warning " > apollo-cache-inmemory#1.6.6" has unmet peer dependency "graphql#^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
remote: warning " > apollo-client#2.6.10" has unmet peer dependency "graphql#^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
remote: warning "#keystonejs/apollo-helpers > apollo-link#1.2.14" has unmet peer dependency "graphql#^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0".
remote: warning "#keystonejs/adapter-mongoose > #keystonejs/fields-mongoid > #keystonejs/fields > slate-react > react-immutable-proptypes#2.2.0" has unmet peer dependency "immutable#>=3.6.2".
remote: warning "#keystonejs/adapter-mongoose > #keystonejs/fields-mongoid > #keystonejs/fields > slate-react > slate-prop-types#0.5.44" has unmet peer dependency "immutable#>=3.8.1".
remote: warning "#keystonejs/apollo-helpers > apollo-cache#1.3.5" has unmet peer dependency "graphql#^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
remote: warning "#keystonejs/apollo-helpers > apollo-utilities#1.3.4" has unmet peer dependency "graphql#^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
remote: warning "#keystonejs/apollo-helpers > #apollo/react-components#3.1.5" has unmet peer dependency "graphql#^14.3.1".
remote: warning " > #keystonejs/app-graphql#5.1.7" has unmet peer dependency "express#^4.17.1".
remote: warning "#keystonejs/app-graphql > #keystonejs/app-graphql-playground#5.1.3" has unmet peer dependency "express#^4.17.1".
remote: warning " > apollo-link-http#1.5.17" has unmet peer dependency "graphql#^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
remote: warning "#keystonejs/app-graphql > #keystonejs/app-graphql-playground > #apollographql/graphql-playground-react > react-codemirror#1.0.0" has incorrect peer dependency "react#>=15.5 <16".
remote: warning "#keystonejs/app-graphql > #keystonejs/app-graphql-playground > #apollographql/graphql-playground-react > react-codemirror#1.0.0" has incorrect peer dependency "react-dom#>=15.5 <16".
remote: warning " > react-apollo#3.1.5" has unmet peer dependency "#types/react#^16.8.0".
remote: warning " > react-apollo#3.1.5" has unmet peer dependency "graphql#^14.3.1".
remote: warning "react-apollo > #apollo/react-hoc#3.1.5" has unmet peer dependency "#types/react#^16.8.0".
remote: warning "react-apollo > #apollo/react-hoc#3.1.5" has unmet peer dependency "graphql#^14.3.1".
remote: warning " > styled-components#5.1.1" has unmet peer dependency "react-is#>= 16.8.0".
remote: [4/4] Building fresh packages...
remote: Done in 92.86s.
remote:
remote: -----> Build
remote: Running build (yarn)
remote: yarn run v1.22.4
remote: $ cross-env NODE_ENV=production keystone build
remote: - Initialising Keystone CLI
remote: ℹ Command: keystone build
remote: -
remote: ✔ Validated project entry file ./index.js
remote: - Initialising Keystone instance
remote: ✔ Initialised Keystone instance
remote: - Exporting Keystone build to ./dist
**remote: warn - You have enabled experimental feature(s).
remote:
remote: warn - Experimental features are not covered by semver, and may cause** unexpected or broken application behavior. Use them at your own risk.
remote: Creating an optimized production build...
remote: Attention: Next.js now collects completely anonymous telemetry regarding usage.
remote: This information is used to shape Next.js' roadmap and prioritize features.
remote: You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
remote: https://nextjs.org/telemetry
remote:
remote: > Using external babel configuration
remote: > Location: "/tmp/build_a5f2f47908fc7f68e09dd51d79d5e3f7/app/.babelrc"
remote:
**remote: Failed to compile.
remote:
remote: ./pages/about-us.js
remote: Module not found: Can't resolve 'components/UI/layout' in '/tmp/build_a5f2f47908fc7f68e09dd51d79d5e3f7/app/pages'
remote:
remote: ✖ Exporting Keystone build to ./dist
remote: Error: > Build failed because of webpack errors
remote: at build (/tmp/build_a5f2f47908fc7f68e09dd51d79d5e3f7/node_modules/next/dist/build/index.js:13:917)**
remote: at async Promise.all (index 2)
remote: at async Object.exec (/tmp/build_a5f2f47908fc7f68e09dd51d79d5e3f7/node_modules/#keystonejs/keystone/bin/commands/build.js:42:7)
remote: error Command failed with exit code 1.
remote: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to xxxx.
remote:
Yes, I do know that it could be a webpack config error and I don't know what does mean about experimental feature.
keystone.js
const { Keystone } = require('#keystonejs/keystone');
const { PasswordAuthStrategy } = require('#keystonejs/auth-password');
const { GraphQLApp } = require('#keystonejs/app-graphql');
const { AdminUIApp } = require('#keystonejs/app-admin-ui');
const { NextApp } = require('#keystonejs/app-next');
const session = require('express-session');
const MongoStore = require('connect-mongo')(session);
const { UserSchema } = require('./models');
const initialiseData = require('./initial-data');
const { MongooseAdapter: Adapter } = require('#keystonejs/adapter-mongoose');
const PROJECT_NAME = 'Website Name';
const adapterConfig = {
mongoUri: process.env.MONGO_URI,
useNewUrlParser: true,
useFindAndModify: false,
useUnifiedTopology: true,
};
const keystone = new Keystone({
name: PROJECT_NAME,
adapter: new Adapter(adapterConfig),
onConnect: process.env.CREATE_TABLES !== 'true' && initialiseData,
cookieSecret: 'long_secret',
cookie: {
secure: process.env.NODE_ENV === 'production',
maxAge: 1000 * 60 * 60 * 24 * 30,
sameSite: false,
},
secureCookies: false,
sessionStore: new MongoStore({
url: process.env.MONGO_URI,
autoReconnect: true,
secret: 'long_secret',
mongooseConnection: adapterConfig,
autoRemove: 'disabled'
})
});
keystone.createList('User', UserSchema);
const authStrategy = keystone.createAuthStrategy({
type: PasswordAuthStrategy,
list: 'User',
});
module.exports = {
keystone,
apps: [
new GraphQLApp(),
new AdminUIApp({
enableDefaultRoute: false,
authStrategy,
}),
new NextApp({
dir: 'app',
})
],
configureExpress: app => {
app.set('trust proxy', 1);
}
};
I'm not pretty sure what I'm doing wrong, neither witch configuration do I need to do at next.config.js, since the only config that I have is this:
module.exports = {
experimental: {
jsconfigPaths: true,
}
}
with or without it, it gives me the same error, just the route changes and this error only occurs on pages folder
Folder Structure
./app
|– api/
|– apifile.js
|
|– components/
|– ...componentsfiles.js
|
|– hooks/
|– ...hooksfiles.js
|
|– pages/
|– ...pagesfiles.js
|
|– public/
|– assets/
|
|– utils
|– style
|_
|– ...styles.js
|– ...otherutils.js
|
|– .babelrc
|
|– jsconfig.json
|
|– next.config.js
./models/
./index.js (keystone.js)
./initial-data.js
./package.json
and this is my package.json file
{
"name": "xxxx-xxxx",
"description": "xxxx xxxx",
"private": true,
"version": "5.0.7",
"author": "Andler Develops",
"repository": "https://github.com/keystonejs/keystone/tree/master/packages/create-keystone-app/example-projects/starter",
"homepage": "https://github.com/keystonejs/keystone",
"license": "MIT",
"engines": {
"node": "12.12.0",
"yarn": "1.22.4"
},
"scripts": {
"dev": "cross-env NODE_ENV=development DISABLE_LOGGING=true keystone dev",
"build": "cross-env NODE_ENV=production keystone build",
"start": "cross-env NODE_ENV=production keystone start",
"create-tables": "cross-env CREATE_TABLES=true keystone create-tables"
},
"dependencies": {
"#keystonejs/adapter-mongoose": "^8.1.0",
"#keystonejs/apollo-helpers": "^5.1.4",
"#keystonejs/app-admin-ui": "^6.0.0",
"#keystonejs/app-graphql": "^5.1.7",
"#keystonejs/app-next": "^5.1.2",
"#keystonejs/auth-password": "^5.1.7",
"#keystonejs/field-content": "^6.0.1",
"#keystonejs/fields": "^10.0.0",
"#keystonejs/file-adapters": "^6.0.2",
"#keystonejs/keystone": "^9.0.0",
"#material-ui/core": "^4.10.0",
"#material-ui/lab": "^4.0.0-alpha.54",
"#styled-system/theme-get": "^5.1.2",
"aos": "^2.3.4",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"connect-mongo": "^3.2.0",
"cross-env": "^7.0.2",
"dotenv": "^8.2.0",
"envy": "^2.0.0",
"express-session": "^1.17.1",
"framer-motion": "^1.11.0",
"graphql-tag": "^2.10.3",
"next": "^9.4.4",
"react": "^16.13.1",
"react-apollo": "^3.1.5",
"react-dom": "^16.13.1",
"react-helmet": "^6.0.0",
"react-icons": "^3.10.0",
"react-lazy-load-image-component": "^1.5.0-beta.0",
"rebass": "^4.0.7",
"slugify": "^1.4.0",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5"
},
"devDependencies": {
"babel-plugin-styled-components": "^1.10.7",
"prettier": "2.0.5"
}
}

Answer 1

I ran into this yesterday, it works locally, but when I deploy it does not and I get the error you're getting. I fixed it by moving my dependencies from my nextjs package.json, to the keystone package.json in the root of my project. I completely deleted my node_modules in the nextjs folder as I guess it just doesn't look at it.

Answer 2

I also didn't have problems on my local machine, but when built in a docker container received the error. I changed versions of the core packages to the ones in the beginner's guide:
"next": "9.3.5",
"react": "16.13.1",
"react-dom": "16.13.1",
I don't know why, but it helped. I lost more than 4 hours debugging this sh**...