在 GitHub Actions 中启动 nuxt 时出现 Nuxt 致命错误

Posted

技术标签:

【中文标题】在 GitHub Actions 中启动 nuxt 时出现 Nuxt 致命错误【英文标题】:Nuxt Fatal Error starting nuxt in GitHub Actions 【发布时间】:2021-10-19 01:26:11 【问题描述】:

我正在运行一个 GitHub 操作工作流程,该工作流程构建并运行一个用于 cypress.js 测试的 nuxt 应用程序。我收到了一个 Nuxt 致命错误,在构建应用程序时,我似乎无法通过读取堆栈来发现该错误。

仅供参考,我已经查看了 *** 中记录的每个错误,并出现此致命错误,但似乎找不到解决方案。

这是我的 GitHub Actions 工作流程(一切似乎运行正常):

name: Cypress run on push

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      fail-fast: false
      matrix:
        node: [14.17.0]
        containers: [1, 2, 3, 4, 5]

    steps:
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: $ matrix.node 
      - run: node -v

      - name: Checkout
        uses: actions/checkout@v2
      
      - name: Running npm ci (installing dependencies)
        run: npm ci

      - name: Running npm install
        run: npm install
      
      # Update Browserlist
      - run: npx browserslist@latest --update-db

      - name: Starting test server and running Cypress
        uses: cypress-io/github-action@v2
        with:
          build: npm run build
          start: npm run start
          wait-on: 'http://localhost:3000/'
          wait-on-timeout: 120
          record: true
          parallel: true
          # browser: chrome
          # headless: true
        env:
          CYPRESS_RECORD_KEY: $ secrets.CYPRESS_RECORD_KEY 
          GITHUB_TOKEN: $ secrets.GITHUB_TOKEN 

这是错误。我不明白为什么会出现引用未解决路径的错误。路径实际上是正确的。这也可以在本地、开发服务器、暂存服务器和生产中运行,没有任何问题:


[fatal] Nuxt build error
  ERROR in ./components/ui/dialogs/SocialMediaWrapper.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/ui/dialogs/SocialMediaWrapper.vue?vue&type=script&lang=js&)
  Module not found: Error: Can't resolve '@/components/svg/DottedNoteBook' in 'components/ui/dialogs'
  @ ./components/ui/dialogs/SocialMediaWrapper.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/ui/dialogs/SocialMediaWrapper.vue?vue&type=script&lang=js&) 200:0-61 203:20-34
  @ ./components/ui/dialogs/SocialMediaWrapper.vue?vue&type=script&lang=js&
  @ ./components/ui/dialogs/SocialMediaWrapper.vue
  @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/trial-view/_id.vue?vue&type=script&lang=js&
  @ ./pages/trial-view/_id.vue?vue&type=script&lang=js&
  @ ./pages/trial-view/_id.vue
  @ ./.nuxt/router.js
  @ ./.nuxt/index.js
  @ ./.nuxt/client.js
  @ multi ./.nuxt/client.js

   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! JurorSearch@2.18.6 build: `nuxt build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the JurorSearch@2.18.6 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!     /home/runner/.npm/_logs/2021-08-17T05_30_28_916Z-debug.log
Error: Process completed with exit code 1.

【问题讨论】:

在您发送的错误日志的第 3 行,它说它无法解析 @/components/svg/DottedNoteBook。如果您的 /components 文件夹中有一个常规的 .svg 文件,我会将其移动到 /assets 并在路径末尾使用 .svg 导入它。如果是组件,则尝试在路径末尾使用.vue 导入组件。 感谢@Tarkan - “svg” 是一个目录,“DopttedNotebook” 是一个 Vue 组件(实际上是“DottedNotebook.vue”),它包含多个用于渲染 svg 的函数。这不是一个 svg 文件。我将尝试将 .vue 添加到导入中,看看会发生什么。奇怪的是,除了 GitHub Actions 之外,其他任何地方都不会发生这种情况。 【参考方案1】:

想通了。

组件调用了“DottedNoteBook”,但文件名为“DottedNotebook.vue”。 (字母“B”的大小写不同。)

我不确定为什么以前从未出现过该案例问题或阻止在 GitHub Actions 之外进行编译,但这就是问题所在。谢谢@Tarkan 让我仔细看看。

【讨论】:

以上是关于在 GitHub Actions 中启动 nuxt 时出现 Nuxt 致命错误的主要内容,如果未能解决你的问题,请参考以下文章

[Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

使用 jest-puppeteer 在 GitHub Actions 中构建和启动 2 个应用程序会导致读取环境变量时出现问题

[Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

Nuxt 模块状态

前端框架 Nuxt3 集成 Pinia

Nuxt.js 服务器端渲染:启动服务器后数据未更新