Issues while deploying nextjs monorepo

[Puneet56]

Hi, I am trying to deploy a next js monorepo set up using yarn workspaces.

Here is is folder structure

The nextjs app is located at /apps/next.
The build is being created successfully and Oryx also identified the build but then tries to install dependencies again using npm which fails.

Logs below

yarn run v1.22.15
$ next build
warn - Invalid next.config.js options detected:

• The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
• The root value has an unexpected property, configOrigin, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
• The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
• The root value has an unexpected property, webpack5, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
• The value at .amp.canonicalBase must be 1 character or more but it was 0 characters.
• The value at .assetPrefix must be 1 character or more but it was 0 characters.
• The value at .experimental.outputFileTracingRoot must be 1 character or more but it was 0 characters.
• The value at .i18n must be an object but it was null.

See more info here: https://nextjs.org/docs/messages/invalid-next-config
warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
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:
https://nextjs.org/telemetry
info - Skipping validation of types
info - Skipping linting
info - Creating an optimized production build...
info - Compiled successfully
info - Collecting page data...
info - Generating static pages (0/16)
info - Generating static pages (4/16)
info - Generating static pages (8/16)
info - Generating static pages (12/16)
info - Generating static pages (16/16)
info - Finalizing page optimization...
Route (pages) Size First Load JS
┌ ○ / 236 B 264 kB
├ /_app 0 B 236 kB
├ ○ /404 196 B 237 kB
├ ○ /account 243 B 264 kB
├ ○ /account/edit/[editAction] 2.83 kB 242 kB
├ ○ /account/edit/password 5.37 kB 260 kB
├ λ /api/account 0 B 236 kB
├ λ /api/account/register 0 B 236 kB
├ λ /api/auth 0 B 236 kB
├ λ /api/auth/login 0 B 236 kB
├ λ /api/auth/register 0 B 236 kB
├ λ /api/auth/update-password 0 B 236 kB
├ λ /api/contracts 0 B 236 kB
├ λ /api/contracts/apply 0 B 236 kB
├ λ /api/contracts/status 0 B 236 kB
├ λ /api/contracts/vehicles 0 B 236 kB
├ λ /api/location 0 B 236 kB
├ λ /api/location/info 0 B 236 kB
├ λ /api/location/nearby 0 B 236 kB
├ λ /api/location/permits 0 B 236 kB
├ λ /api/location/search 0 B 236 kB
├ λ /api/permits 0 B 236 kB
├ λ /api/permits/info 0 B 236 kB
├ ○ /locations 5.79 kB 242 kB
├ ○ /locations/[locationId] 4.04 kB 244 kB
├ ○ /locations/[locationId]/permits 3.77 kB 244 kB
├ ○ /locations/[locationId]/permits/[permitId] 32.5 kB 276 kB
├ ○ /otp-signin 2.18 kB 241 kB
├ ○ /permits 4.12 kB 287 kB
├ ○ /permits/[permitId] 258 B 315 kB
├ ○ /permits/contracts 258 B 315 kB
├ ○ /register 276 B 266 kB
└ ○ /signin 273 B 266 kB

• First Load JS shared by all 240 kB
  ├ chunks/framework-480762aae34a056e.js 44.9 kB
  ├ chunks/main-62473d4cff30beae.js 31.2 kB
  ├ chunks/pages/_app-a6e783ac6a239d04.js 159 kB
  ├ chunks/webpack-42cdea76c8170223.js 1.07 kB
  └ css/430369ebed83a6f9.css 4.02 kB

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)

Done in 45.40s.

Preparing output...

Copying files to destination directory '/ss-oryx/app'...
Done in 1 sec(s).
Removing existing manifest file
Creating a manifest file...
Manifest file created.
Copying .ostype to manifest output directory.

Done in 109 sec(s).

---End of Oryx build logs---
Finished building app with Oryx
No Api directory specified. Azure Functions will not be created.
Created default file: /ss-oryx/app/build/index.html
Starting to build function app with Oryx
---Oryx build logs---
Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20221103.1, Commit: a2c65dde152b749fea395f4d1242ea9350942258, ReleaseTagName: 20221103.1

Build Operation ID: |LrfygfxjdNk=.dffcae9b_

Detecting platforms...
Detected following platforms:
nodejs: 16.18.0
Detected the following frameworks: Next.js

Source directory : /ss-oryx/app
Destination directory: /ss-oryx/api

Removing existing manifest file
Creating directory for command manifest file if it does not exist
Creating a manifest file...
Node Build Command Manifest file created.
Using Node version:
v16.18.0

Using Npm version:
8.19.2

Installing production dependencies in '/ss-oryx/app/.oryx_prod_node_modules'...

Running 'npm install --unsafe-perm --production'...

npm WARN config production Use --omit=dev instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: function-handler-build@0.1.0
npm ERR! Found: next@12.3.3
npm ERR! node_modules/next
npm ERR! next@"^12.3.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^11" from @expo/next-adapter@4.0.13
npm ERR! node_modules/@expo/next-adapter
npm ERR! @expo/next-adapter@"^4.0.13" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-11-17T05_50_37_864Z-debug-0.log

---End of Oryx build logs---
Oryx has failed to build the solution.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting
##[error]Error: The process '/usr/bin/bash' failed with exit code 1
Finishing: AzureStaticWebApp

I have set the app location as '/apps/next' and app build location as 'build'

Tried setting up engine as "yarn" in package.json build still no luck.

[vivekjilla]

Hi @Puneet56 Can you please share few more details like:

1. Where is your repo hosted, Github, AzureDevops, etc?
2. Can you share full logs of the build run, it seems like some of the initial logs are missing. Just want to get some more details and see if we're missing anything.

Thanks in Advance!

[Puneet56]

Hi @vivekjilla, I am attaching the error logs.
The repo is hosted on AzureDevops
error_log.txt

One update, I managed to get the deployment successful by adding NPM_CONFIG_LEGACY_PEER_DEPS to true but the site is showing 502 error.

sucess_log.txt

My yaml file

name: Azure Static Web Apps CI/CD

pr:
branches:
include:
- ECPDEV-5820-code-refactor-account-screen
trigger:
branches:
include:
- ECPDEV-5820-code-refactor-account-screen

jobs:

• job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
  vmImage: ubuntu-latest
  variables:
  • group: Azure-Static-Web-Apps-victorious-island-018f08510-variable-group
    steps:
  • checkout: self
    submodules: true
  • task: AzureStaticWebApp@0
    env:
    NPM_CONFIG_LEGACY_PEER_DEPS: true
    inputs:
    app_location: '/apps/next'
    app_build_command: 'yarn build'
    build_timeout_in_minutes: 15
    azure_static_web_apps_api_token: '$(AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_ISLAND_018F08510)'

[vivekjilla]

Thanks for the details @Puneet56 .

There's an issue when using node 16 and above, on AzureDevops when running npm install command. We're investigating that further.
So, the build failures might be due to that.
Meanwhile, can you please try one of these two below workarounds without the NPM_CONFIG_LEGACY_PEER_DEPS env variable:

1. Add api_build_command: 'yarn build' or
2. Set node version as 14 in your package.json using the engines attribute. More details at https://edi.wang/post/2022/1/27/how-to-specify-nodejs-version-when-building-azure-static-web-app

And if the build succeeds and you still see the 502 error after that, you can debug the server-side code further using application insights by adding log statements in your app. To enable monitoring: https://learn.microsoft.com/en-us/azure/static-web-apps/monitor

Please let us know if it helps. Thanks!

[Puneet56]

@vivekjilla
The build works fine with node 14 but still facing 502 error.

Application Insights screens also errors out.

Might be temporary

[vivekjilla]

@Puneet56, it seems your app is failing to start. Does your app expect some environment variables to start correctly, and if so, can you please check if you're providing the necessary environment variables via Configuration --> Application settings screen in the portal.

[georgibakken]

Hi everyone! I have a smilier setup, though a bit different Oryx error. I am not 100% sure what configuration I should have.

I have a monorepo setup with yarn workspaces, based on this monorepo starter with nextjs, tamagui and expo.

I want to deploy the nextjs app as a hybrid app using Azure Static Web App.

From Oryx I get the following error:

Can it be an issue with yarn v3 and Oryx?

In the starter repo, they write this for Vercel deployment:

Deploying to Vercel

• Root: ./apps/next
• Install command to be yarn set version berry && yarn install
• Build command: leave default setting
• Output dir: leave default setting

I have tried similar setup in the GitHub workflow file

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_JOLLY_DUNE_0C5557303 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: 'upload'
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: 'apps/web' # App source code path
          api_location: '' # Api source code path - optional
          output_location: '' # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          TAMAGUI_TAGET: 'web'
          PRE_BUILD_COMMAND: 'yarn set version berry && yarn install'

Note: In my monorepo, the nextjs app is under apps/web and not apps/next as the monorepo starter.

To reproduce:

1. Create the starter
2. Setup Deploy to Azure Static Web App
3. Configure the workflow
4. See error

From what I can see and understand, Oryx doesn't know about the .lock file from the root ? I try to go to the root and run yarn build as the build command in the starter repo does.

I also tried to sneak in yarn install in the build script, which gave this:

Any idea on what I can do here? Thank you!

[georgibakken]

By setting

"engines": {
    "yarn": "~3.6.1"
  },

in package.json, I managed to get further to the next build error, which was

Using Node version:
v16.20.1

Using Yarn version:
3.6.1

Running 'yarn install --prefer-offline'...

➤ YN0050: The --prefer-offline flag is deprecated; use the --cached flag with 'yarn add' instead

I am trying with CUSTOM_BUILD_COMMAND: yarn add --cached && yarn build and getting some new interesting errors, which seems to have to do with the packages in my monorepo

Command failed with exit code 2: npx tsc --baseUrl . --outDir types --rootDir src --emitDeclarationOnly --declarationMap
➤ YN0000: error TS5033: Could not write file '/github/workspace/packages/ui/types/animations.d.ts': EACCES: permission denied, open '/github/workspace/packages/ui/types/animations.d.ts'.
➤ YN0000: error TS5033: Could not write file '/github/workspace/packages/ui/types/animations.d.ts.map': EACCES: permission denied, open '/github/workspace/packages/ui/types/animations.d.ts.map'.
➤ YN0000: error TS5033: Could not write file '/github/workspace/packages/ui/types/colors/index.d.ts': EACCES: permission denied, mkdir '/github/workspace/packages/ui/types/colors'.
...

[georgibakken]

I added chown -R root:root ../.. && yarn add --cached && yarn build and the app is deployed!

And now I get the error @Puneet56 reported. The

Server Error.

There was an unexpected error in the request processing.

I have set env variables (and I don't think I have any required to start) - also tried locally a yarn start that works.

I will try to set up app insights, I will just have to add a function - starting to wonder a bit if app insights will help me or not 🙈

[georgibakken]

#1059 (comment)