Closed selfagency closed 4 years ago
@selfagency Perhaps you could share some code? Happy to look at if so. My largest production app using this builder is about 20 Mb.
@selfagency Hm, that is odd. I do note that you have quite a few files depended upon by your nuxt.config
(nice and clean file structure, by the bye!), and you'll need to specify these using the serverFiles
config key. That may make a difference.
@selfagency I believe sentry may well be the culprit. Let me know if removing it makes a difference for you.
@selfagency @danielroe I had a similar problem. You have to move some dependencies
to
devDependencies
in your package.json. You don't need to put everything in
dependencies
, because that is what makes your single serverless function to blow up. I see you have things like node-sass
and sass-loader
. They all can me moved to devDependencies
. I did the same and everything still works fine.
Yep. You can even put nuxt itself to devDependencies and it shall work with this builder.
dependencies
in devDependencies
Works using yarn
too.
source : https://dev.to/patzick/why-dependencies-matter-deploy-your-nuxt-ssr-universal-app-to-vercel-now-4ndp
Hi guys! I reopen this thread because following the instructions above Vercel return me this error:
This is my package.json
:
{
"name": "app",
"version": "1.0.0",
"description": "Nuxt app starter kit",
"private": true,
"author": "Davide Marchet",
"license": "MIT",
"scripts": {
"vercel-build": "npm run install:all && nuxt build",
"dev": "nuxt",
"build": "nuxt build",
"analyze": "nuxt build --analyze",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
"lint:style": "stylelint --fix \"**/**/*.{vue,scss,css}\" --ignore-path .gitignore",
"lint": "npm run lint:js && npm run lint:style",
"install:library": "cd ../library/ && npm i",
"install:app": "npm i",
"install:all": "npm run install:library && npm run install:app",
"test": "jest"
},
"devDependencies": {
"@nuxtjs/apollo": "^4.0.1-rc.5",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/gtm": "^2.4.0",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/sitemap": "^2.4.0",
"core-js": "^3.20.2",
"cors": "^2.8.5",
"cross-env": "^7.0.3",
"esm": "^3.2.25",
"express": "^4.17.2",
"fabric": "^4.6.0",
"gsap": "^3.9.1",
"library": "file:../library",
"modern-css-reset": "^1.4.0",
"nuxt": "^2.15.8",
"nuxt-i18n": "^6.27.2",
"nuxt-vuex-localstorage": "^1.3.0",
"qs": "^6.10.3",
"scss-react": "^1.0.2",
"scss-slamp": "^1.3.3",
"three": "^0.136.0",
"@babel/eslint-parser": "^7.16.5",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/eslint-config": "^8.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/style-resources": "^1.2.0",
"@nuxtjs/stylelint-module": "^4.1.0",
"@vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.4.6",
"eslint": "^8.6.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.4.7",
"node-sass": "^7.0.1",
"nodemon": "^2.0.15",
"prettier": "^2.5.1",
"sass": "^1.47.0",
"sass-loader": "^10.1.1",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.19.0",
"vue-jest": "^3.0.7"
}
}
and this my vercel.json
:
{
"version": 2,
"builds": [
{
"src": "app/nuxt.config.js",
"use": "@nuxtjs/vercel-builder",
"config": {
"serverFiles": ["package.json", "library/node_modules/**", "static/**", "configuration/**", "server-middleware/**", "translation/**", ".nuxt/dist/sitemap-routes.json"]
}
}
],
"routes": [
{
"src": "/sw.js",
"continue": true,
"headers": {
"Cache-Control": "public, max-age=0, must-revalidate",
"Service-Worker-Allowed": "/"
}
},
{
"src": "/.nuxt/.+",
"headers": {
"Cache-Control": "max-age=31557600"
}
},
{
"src": "^/(.*)",
"dest": "/"
}
]
}
I cannot figure out how to solve this problem. Any advice are precious!
Thanks in advance and kind regards,
Davide
Hi guys! I reopen this thread because following the instructions above Vercel return me this error:
This is my
package.json
:{ "name": "app", "version": "1.0.0", "description": "Nuxt app starter kit", "private": true, "author": "Davide Marchet", "license": "MIT", "scripts": { "vercel-build": "npm run install:all && nuxt build", "dev": "nuxt", "build": "nuxt build", "analyze": "nuxt build --analyze", "start": "nuxt start", "generate": "nuxt generate", "lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .", "lint:style": "stylelint --fix \"**/**/*.{vue,scss,css}\" --ignore-path .gitignore", "lint": "npm run lint:js && npm run lint:style", "install:library": "cd ../library/ && npm i", "install:app": "npm i", "install:all": "npm run install:library && npm run install:app", "test": "jest" }, "devDependencies": { "@nuxtjs/apollo": "^4.0.1-rc.5", "@nuxtjs/axios": "^5.13.6", "@nuxtjs/gtm": "^2.4.0", "@nuxtjs/pwa": "^3.3.5", "@nuxtjs/sitemap": "^2.4.0", "core-js": "^3.20.2", "cors": "^2.8.5", "cross-env": "^7.0.3", "esm": "^3.2.25", "express": "^4.17.2", "fabric": "^4.6.0", "gsap": "^3.9.1", "library": "file:../library", "modern-css-reset": "^1.4.0", "nuxt": "^2.15.8", "nuxt-i18n": "^6.27.2", "nuxt-vuex-localstorage": "^1.3.0", "qs": "^6.10.3", "scss-react": "^1.0.2", "scss-slamp": "^1.3.3", "three": "^0.136.0", "@babel/eslint-parser": "^7.16.5", "@nuxtjs/dotenv": "^1.4.1", "@nuxtjs/eslint-config": "^8.0.0", "@nuxtjs/eslint-module": "^3.0.2", "@nuxtjs/style-resources": "^1.2.0", "@nuxtjs/stylelint-module": "^4.1.0", "@vue/test-utils": "^1.3.0", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.1.0", "babel-jest": "^27.4.6", "eslint": "^8.6.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-nuxt": "^3.1.0", "eslint-plugin-prettier": "^4.0.0", "jest": "^27.4.7", "node-sass": "^7.0.1", "nodemon": "^2.0.15", "prettier": "^2.5.1", "sass": "^1.47.0", "sass-loader": "^10.1.1", "stylelint": "^13.13.1", "stylelint-config-prettier": "^8.0.2", "stylelint-config-standard": "^22.0.0", "stylelint-scss": "^3.19.0", "vue-jest": "^3.0.7" } }
and this my
vercel.json
:{ "version": 2, "builds": [ { "src": "app/nuxt.config.js", "use": "@nuxtjs/vercel-builder", "config": { "serverFiles": ["package.json", "library/node_modules/**", "static/**", "configuration/**", "server-middleware/**", "translation/**", ".nuxt/dist/sitemap-routes.json"] } } ], "routes": [ { "src": "/sw.js", "continue": true, "headers": { "Cache-Control": "public, max-age=0, must-revalidate", "Service-Worker-Allowed": "/" } }, { "src": "/.nuxt/.+", "headers": { "Cache-Control": "max-age=31557600" } }, { "src": "^/(.*)", "dest": "/" } ] }
I cannot figure out how to solve this problem. Any advice are precious!
Thanks in advance and kind regards,
Davide
Same issue.
Did you look into "Functions" tab in your deployment to watch server side errors ?
Hi, moving all dependencies in devDependencies didn't work for me. Then I debugged and I saw that moving threejs and fabric as devDependencies let Vercel works as aspected.
I also remove huge assets from static directory.
If could be useful this is my new package.json
{
"name": "app",
"version": "1.0.0",
"description": "Nuxt app starter kit",
"private": true,
"author": "Davide Marchet",
"license": "MIT",
"scripts": {
"vercel-build": "npm run install:all && nuxt build",
"netlify-build": "npm run install:all && nuxt generate",
"dev": "nuxt",
"build": "nuxt build",
"analyze": "nuxt build --analyze",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
"lint:style": "stylelint --fix \"**/**/*.{vue,scss,css}\" --ignore-path .gitignore",
"lint": "npm run lint:js && npm run lint:style",
"install:library": "cd ../library/ && npm i",
"install:app": "npm i",
"install:all": "npm run install:library && npm run install:app",
"test": "jest"
},
"dependencies": {
"@nuxtjs/apollo": "^4.0.1-rc.5",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/gtm": "^2.4.0",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/sitemap": "^2.4.0",
"core-js": "^3.20.2",
"cors": "^2.8.5",
"cross-env": "^7.0.3",
"gsap": "^3.9.1",
"library": "file:../library",
"modern-css-reset": "^1.4.0",
"nuxt": "^2.15.8",
"nuxt-i18n": "^6.27.2",
"nuxt-vuex-localstorage": "^1.3.0",
"qs": "^6.10.3",
"scss-react": "^1.0.2",
"scss-slamp": "^1.3.3"
},
"devDependencies": {
"@babel/eslint-parser": "^7.16.5",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/eslint-config": "^8.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/style-resources": "^1.2.0",
"@nuxtjs/stylelint-module": "^4.1.0",
"@vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.4.6",
"eslint": "^8.6.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.4.7",
"node-sass": "^7.0.1",
"nodemon": "^2.0.15",
"prettier": "^2.5.1",
"sass": "^1.47.0",
"sass-loader": "^10.1.1",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.19.0",
"three": "^0.136.0",
"vue-jest": "^3.0.7",
"webpack": "^4.46.0"
}
}
I hope Vercel/Nuxt team sooner or later will fix all this runtime issues :) Have a nice day and kind regards, Davide
@azpery This is the log,
2022-02-22T09:12:41.653Z undefined ERROR Uncaught Exception {"errorType":"Error","errorMessage":"Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:\n Error: Cannot find module 'esm'\nRequire stack:\n- /var/task/vercel__launcher.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","stack":["Error: Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:"," Error: Cannot find module 'esm'","Require stack:","- /var/task/vercel__launcher.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at Object.<anonymous> (/var/task/vercel__launcher.js:23:13)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Module.require (internal/modules/cjs/loader.js:974:19)"," at require (internal/modules/cjs/helpers.js:93:18)"," at _tryRequireFile (/var/runtime/UserFunction.js:63:32)"," at _tryRequire (/var/runtime/UserFunction.js:151:20)"," at _loadUserApp (/var/runtime/UserFunction.js:197:12)"]} 2022-02-22T09:12:41.653Z undefined ERROR Uncaught Exception {"errorType":"Error","errorMessage":"Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:\n Error: Cannot find module 'esm'\nRequire stack:\n- /var/task/vercel__launcher.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","stack":["Error: Could not load Nuxt configuration. Make sure all dependencies are listed in package.json dependencies or in serverFiles within builder options:"," Error: Cannot find module 'esm'","Require stack:","- /var/task/vercel__launcher.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at Object.<anonymous> (/var/task/vercel__launcher.js:23:13)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Module.require (internal/modules/cjs/loader.js:974:19)"," at require (internal/modules/cjs/helpers.js:93:18)"," at _tryRequireFile (/var/runtime/UserFunction.js:63:32)"," at _tryRequire (/var/runtime/UserFunction.js:151:20)"," at _loadUserApp (/var/runtime/UserFunction.js:197:12)"]}
package.json
{
"name": "website",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"build:analyze": "nuxt build --analyze",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "yarn lint:js",
"test": "jest",
"build:static": "nuxt build && nuxt generate"
},
"dependencies": {
"@fortawesome/fontawesome-pro": "^5.15.4",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/pro-duotone-svg-icons": "^5.15.4",
"@fortawesome/pro-light-svg-icons": "^5.15.4",
"@sentry/tracing": "^6.13.3",
"axios": "^0.22.0",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.15.1",
"dayjs": "^1.10.7",
"nuxt": "^2.15.7",
"vuex": "^3.6.2"
},
"devDependencies": {
"@nuxt/content": "^1.14.0",
"@nuxtjs/fontawesome": "^1.1.2",
"@nuxtjs/sentry": "^5.1.4",
"@nuxtjs/vercel-builder": "^0.22.1",
"sass": "1.32.13",
"sass-loader": "^10.1.1"
}
}
Moved @nuxt/content
, @nuxtjs/fontawesome
, @nuxtjs/sentry
to devDependencies
.
What's the content of your nuxt.config?
@danielroe
import path from "path"
import fs from "fs"
function getRoutes() {
const citiesFileNames = readFilesFromDir(
path.join(__dirname, "content", "cities")
)
const citiesRoutes = citiesFileNames.map(
(cityFileName) => `/city/${cityFileName.replace(/.md$/, "")}`
)
const blogFileNames = readFilesFromDir(
path.join(__dirname, "content", "blogs")
)
const blogRoutes = blogFileNames.map(
(blogFileName) => `/${blogFileName.replace(/.md$/, "")}`
)
return [...citiesRoutes, ...blogRoutes]
}
function readFilesFromDir(targetPath) {
return fs
.readdirSync(targetPath, {
withFileTypes: true,
})
.filter((dirent) => dirent.isFile())
.map((dirent) => dirent.name)
}
const isProd = process.env.NODE_ENV
export default {
ssr: true,
// Target: https://go.nuxtjs.dev/config-target
// target: "static",
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "Website",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1, shrink-to-fit=no",
},
{
name: "description",
content:
"Website",
},
{ name: "format-detection", content: "telephone=no" }
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
"@/css/setup.scss",
"bootstrap/scss/bootstrap.scss",
"@/css/custom.scss",
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
router: {
trailingSlash: false,
},
generate: {
routes: isProd ? getRoutes() : [],
},
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/content
"@nuxt/content",
[
"bootstrap-vue/nuxt",
{
bootstrapCSS: false,
bootstrapVueCSS: false,
components: ["BCollapse", "BProgress"],
directivePlugins: ["VBToggle"],
},
],
],
// Content module configuration: https://go.nuxtjs.dev/config-content
content: {},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {},
alias: {
"@/": path.resolve(__dirname, "/"),
},
}
It looks like every time your lambda fires up it's trying to read the filesystem and create routes from markdown. But those markdown files don't exist in the lambda, only in the build stage, which is why it's crashing.
@danielroe Thank you so much. That fixed my initial problem. But I get this new error,
[GET] /
15:51:45:45
WARN /var/task/content does not exist
ℹ Parsed 0 files in 0.0 seconds
λ Cold start took: 1133.389489ms
Error: /landing_pages/Home not found
at QueryBuilder.fetch (/var/task/node_modules/@nuxt/content/lib/query-builder.js:242:13)
at asyncData (pages/index.js:565:57)
at promisify (server.js:16757:15)
at server.js:19163:23
at Array.map (<anonymous>)
at module.exports.__webpack_exports__.default (server.js:19159:51)
ERROR Cannot read property 'services' of undefined
at a.render (pages/index.vue)
at a.module.exports.t._render (node_modules_dev/vue/dist/vue.runtime.common.prod.js:6:0)
at node_modules/vue-server-renderer/build.prod.js:1:70854
2022-02-22T10:06:45.986Z 63655557-d89c-43ac-b85f-c72c1e707b32 ERROR Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: /components/CallToAction not found","reason":{"errorType":"Error","errorMessage":"/components/CallToAction not found","stack":["Error: /components/CallToAction not found"," at QueryBuilder.fetch (/var/task/node_modules/@nuxt/content/lib/query-builder.js:242:13)"," at Store.getCto (server.js:15379:64)"," at Array.wrappedActionHandler (server.js:4379:23)"," at Store.dispatch (server.js:4071:15)"," at Store.boundDispatch [as dispatch] (server.js:3976:21)"," at a.created (server.js:17942:23)"," at Rt (server.js:15057:11188)"," at Je (server.js:15057:25219)"," at a.module.exports.e._init (server.js:15057:32857)"," at new a (server.js:15057:30416)"," at Wi (/var/task/node_modules/vue-server-renderer/build.prod.js:1:66558)"," at oo (/var/task/node_modules/vue-server-renderer/build.prod.js:1:70788)"," at no (/var/task/node_modules/vue-server-renderer/build.prod.js:1:70461)"," at wt.to [as renderNode] (/var/task/node_modules/vue-server-renderer/build.prod.js:1:67708)"," at wt.next (/var/task/node_modules/vue-server-renderer/build.prod.js:1:20522)"," at n (/var/task/node_modules/vue-server-renderer/build.prod.js:1:18734)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: /components/CallToAction not found"," at process.<anonymous> (/var/runtime/index.js:35:15)"," at process.emit (events.js:412:35)"," at processEmit [as emit] (/var/task/node_modules/signal-exit/index.js:199:34)"," at processPromiseRejections (internal/process/promises.js:245:33)"," at processTicksAndRejections (internal/process/task_queues.js:96:32)"]}
Unknown application error occurred
Looks like landing_pages/Home.md
is not found. In layout default.vue
in my app I'm doing this.$content('landing_pages/Home')
in fetch()
. Is that the cause because it's trying to read from fs again? If so how can I fix it? Thanks!
@danielroe That error is just my side of problem. I set services
to null by default and hence the error. But the problem still exists. Looks like nuxt cannot read the content. A reproducible example: https://github.com/axelthat2/nuxt-content-bug. The page is always empty if you run the project in vercel: https://nuxt-content-bug.vercel.app/
Fixed the problem. Apparently to use nuxt content with vercel builder you have to do add this in your vercel.json
,
"config": {
"serverFiles": [".nuxt/content/**", "content/**"]
}
Full vercel.json
,
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder",
"config": {
"serverFiles": [".nuxt/content/**", "content/**"]
}
}
]
}
I have a tiny application comprised of a grand total of three pages with an API call and a smidgen of business logic and when I push to Vercel it says it's too big to run.