heroku - 使用 Keystone v5 构建错误 – @keystonejs/app-next 使用 Heroku CLI
问题描述
我在尝试使用 Keystone v5 + Next.js 上传网站时遇到问题，一切都在 dev 中运行良好，甚至在本地构建：Styled-components + Styled-system、SSR 和 .babelrc（用于 styled-components 配置），也next.config.js（用于 jsconfig.json）。但是在我做这行代码的时候，使用 Heroku CLI 它在所有上传后
命令行
git push heroku develop:master
这样做是因为我正在从原始仓库的开发分支进行测试。
Heroku 日志
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:
是的，我知道这可能是一个 webpack 配置错误，我不知道实验特性是什么意思。
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);
}
};
我不太确定我做错了什么，我不需要在 next.config.js 做任何女巫配置，因为我唯一的配置是：
module.exports = {
experimental: {
jsconfigPaths: true,
}
}
有或没有它，它给了我同样的错误，只是路线改变了，这个错误只发生在 pages 文件夹上
文件夹结构
./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
这是我的 package.json 文件
{
"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"
}
}
解决方案
我的本地机器上也没有问题，但是在构建 docker 容器时收到错误。我将核心包的版本更改为初学者指南中的版本：
"next": "9.3.5",
"react": "16.13.1",
"react-dom": "16.13.1",
我不知道为什么，但它有帮助。我在调试这个 sh ** 时浪费了 4 个多小时...
推荐阅读
- reactjs - “TypeError：在 API 单元测试期间无法读取 null 的属性‘createEvent’”，反应为 0.0.0-experimental-0eea57724
- angular - 等到构造函数完成初始化
- flutter - 根据 Flutter 中的测验应用程序的答案更改屏幕的背景颜色
- java - 在 JAVA 程序中使用 switch case 时不执行矩阵运算
- flutter - 如何注入一个对象以使其在颤振中从其他路由可用
- jquery - 如何在 IOS 设备中消除 Swiper js 滑块上的模糊效果
- python - Python Selenium WebDriverWait 问题
- authentication - 无需在团队应用程序中创建应用程序清单即可对用户进行身份验证
- api - Jira API 返回 Gitlab 问题链接 -> 提取有关 Gitlab 问题的更多数据
- django - 无法将 Django 迁移到 Oracle 12c（其数据类型的指定长度太长）