Action fails when creating static web app (vue-app)

[rohancragg]

Action ci: add Azure Static Web Apps workflow file failed on Build and Deploy job

Output:

Run Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ***
    repo_token: ***
    action: upload
    app_location: /vue-app
    api_location: api
    output_location: dist
/usr/bin/docker run --name a682579ac32752ae14d719b5f042e2cf3e031_0734b7 --label 6a6825 --workdir /github/workspace --rm -e INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN -e INPUT_REPO_TOKEN -e INPUT_ACTION -e INPUT_APP_LOCATION -e INPUT_API_LOCATION -e INPUT_OUTPUT_LOCATION -e INPUT_API_BUILD_COMMAND -e INPUT_APP_ARTIFACT_LOCATION -e INPUT_APP_BUILD_COMMAND -e INPUT_ROUTES_LOCATION -e INPUT_SKIP_APP_BUILD -e INPUT_CONFIG_FILE_LOCATION -e HOME -e GITHUB_JOB -e GITHUB_REF -e GITHUB_SHA -e GITHUB_REPOSITORY -e GITHUB_REPOSITORY_OWNER -e GITHUB_RUN_ID -e GITHUB_RUN_NUMBER -e GITHUB_RETENTION_DAYS -e GITHUB_RUN_ATTEMPT -e GITHUB_ACTOR -e GITHUB_WORKFLOW -e GITHUB_HEAD_REF -e GITHUB_BASE_REF -e GITHUB_EVENT_NAME -e GITHUB_SERVER_URL -e GITHUB_API_URL -e GITHUB_GRAPHQL_URL -e GITHUB_REF_NAME -e GITHUB_REF_PROTECTED -e GITHUB_REF_TYPE -e GITHUB_WORKSPACE -e GITHUB_ACTION -e GITHUB_EVENT_PATH -e GITHUB_ACTION_REPOSITORY -e GITHUB_ACTION_REF -e GITHUB_PATH -e GITHUB_ENV -e RUNNER_OS -e RUNNER_ARCH -e RUNNER_NAME -e RUNNER_TOOL_CACHE -e RUNNER_TEMP -e RUNNER_WORKSPACE -e ACTIONS_RUNTIME_URL -e ACTIONS_RUNTIME_TOKEN -e ACTIONS_CACHE_URL -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/my-static-web-app/my-static-web-app":"/github/workspace" 6a6825:79ac32752ae14d719b5f042e2cf3e031
DeploymentId: 15ac124b-a816-40bd-9959-ffbf6ebd225b

App Directory Location: '/vue-app' was found.
[WARNING] Api Directory Location: 'api' could not be found. Azure Functions will not be created.
Looking for event info
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/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.20211001.1, Commit: f0cbc9b1f0d056493cdb36f92b62f11921c87261, ReleaseTagName: 20211001.1

Build Operation ID: |ehjMvWlCF7E=.687431c4_
Repository Commit : b15f6c3180e015b98aba6aeb5769d72e9a98f991

Detecting platforms...
Detected following platforms:
  nodejs: 14.17.6
Version '14.17.6' of platform 'nodejs' is not installed. Generating script to install it...


Source directory     : /github/workspace/vue-app
Destination directory: /bin/staticsites/ss-oryx/app


Downloading and extracting 'nodejs' version '14.17.6' to '/opt/nodejs/14.17.6'...
Downloaded in 0 sec(s).
Verifying checksum...
Extracting contents...
performing sha512 checksum for: nodejs...
Done in 1 sec(s).

Removing existing manifest file
Creating directory for command manifest file if it doesnot exist
Creating a manifest file...
Node Build Command Manifest file created.

Using Node version:

> [email protected] postinstall /github/workspace/vue-app/node_modules/ejs
> node ./postinstall.js


> @fortawesome/[email protected] postinstall /github/workspace/vue-app/node_modules/@fortawesome/fontawesome-svg-core
> node attribution.js

Font Awesome Free 1.2.35 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)


> @fortawesome/[email protected] postinstall /github/workspace/vue-app/node_modules/@fortawesome/free-solid-svg-icons
> node attribution.js

Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)


> [email protected] postinstall /github/workspace/vue-app/node_modules/node-sass
> node scripts/build.js

Binary found at /github/workspace/vue-app/node_modules/node-sass/vendor/linux-x64-83/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1462 packages from 724 contributors and audited 1468 packages in 80.815s

87 packages are looking for funding
  run `npm fund` for details

found 44 vulnerabilities (33 moderate, 11 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Running 'npm run build'...


> [email protected] build /github/workspace/vue-app
> vue-cli-service build

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

-  Building for production...
 ERROR  Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (/github/workspace/vue-app/node_modules/vue-loader/dist/index.js:8:11)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at /github/workspace/vue-app/node_modules/@vue/cli-service/lib/config/base.js:110:16
    at /github/workspace/vue-app/node_modules/@vue/cli-service/lib/Service.js:236:40
    at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /github/home/.npm/_logs/2021-12-22T10_40_21_954Z-debug.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

[rohancragg]

The problem seems to be that it is detecting nodejs: 14.17.6.

[hollowdrutt]

I ran the commands:

npm audit fix
npm i @vue/compiler-sfc

And committed and pushed the changes to package.json and package-lock.json After that the build action succeeded