nuxt / nuxt/bridge

Using @nuxtjs/router breaks `nuxi generate`

Open
#415 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
Dominant language
TypeScript
Stars
285
Forks
33
Avg merge
22h 38m
Merged PRs (30d)
3

Description

Environment

Nuxt CLI v3.0.0-rc.5 00:24:09
RootDir: /home/developer/verein/rtc-koeln/Rad-Touristik-Club-Koln-e-V-1972.github.io 00:24:09
Nuxt project info: 00:24:09


  • Operating System: Linux
  • Node Version: v18.5.0
  • Nuxt Version: 2.16.0-27616340.013f051b
  • Package Manager: npm@8.13.2
  • Builder: webpack
  • User Config: build, buildModules, components, css, head, modules, plugins, srcDir, ssr, target, serverHandlers, devServerHandlers, bridge
  • Runtime Modules: -
  • Build Modules: (), @nuxtjs/router@1.7.0, @nuxtjs/stylelint-module@4.1.0, @nuxtjs/vuetify@1.12.3, @pinia/nuxt@0.3.0, @nuxt/bridge@3.0.0-27628751.3df21c7

Reproduction

['@nuxtjs/router', { fileName: 'router.ts' }],

import Vue from 'vue'
import Router from 'vue-router'
import VIndex from '~/pages/VIndex.vue'
import VCalendar from '~/pages/VCalendar.vue'
import VContact from '~/pages/VContact.vue'
import VGallery from '~/pages/VGallery.vue'
import VGuestbook from '~/pages/VGuestbook.vue'

Vue.use(Router)

export function createRouter() {
    return new Router({
        mode: 'history',
        routes: [
            {
                component: VIndex,
                name: 'index',
                path: '',
            },
            {
                component: VCalendar,
                name: 'calendar',
                path: '/calendar',
            },
            {
                component: VContact,
                name: 'contact',
                path: '/contact',
            },
            {
                component: VGallery,
                name: 'gallery',
                path: '/gallery',
            },
            {
                component: VGuestbook,
                name: 'guestbook',
                path: '/guestbook',
            },
        ],
    })
}
Describe the bug

Using a router.ts works fine with nuxi dev, but with nuxi generate the index.html and the folders with the components are missing.
It works with node .output/server/index.mjs, but not uploaded to a static site.

Additional context

No response

Logs
Nuxt CLI v3.0.0-rc.5                                                                                                                                                        00:21:32
ℹ Production build                                                                                                                                                          00:21:35
ℹ Bundling only for client side                                                                                                                                             00:21:35
ℹ Target: static                                                                                                                                                            00:21:35
ℹ Using components loader to optimize imports                                                                                                                               00:21:35
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                         00:21:35
✔ Builder initialized                                                                                                                                                       00:21:35
✔ Nuxt files generated                                                                                                                                                      00:21:35

✔ Client
  Compiled successfully in 59.04s


Hash: c9d5f2283fd5389c2fbc
Version: webpack 4.46.0
Time: 59042ms
Built at: 14.07.2022 00:22:35
                           Asset      Size  Chunks                                Chunk Names
  ../server/client.manifest.json  41.6 KiB          [emitted]                     
                      06dfcef.js   246 KiB       1  [emitted] [immutable]  [big]  commons/app
                      56ee819.js  1.49 KiB       2  [emitted] [immutable]         runtime
                        LICENSES  3.95 KiB          [emitted]                     
                      e96d531.js   173 KiB       0  [emitted] [immutable]         app
                      f40f709.js  1.92 MiB       3  [emitted] [immutable]  [big]  vendors/app
fonts/TacticSans-Bld.d0dcd35.otf  66.3 KiB          [emitted] [immutable]         
fonts/TacticSans-Reg.745135e.otf  64.5 KiB          [emitted] [immutable]         
 img/banner_vertikal.cc7568d.svg  3.99 KiB          [emitted] [immutable]         
 + 1 hidden asset
Entrypoint app [big] = 56ee819.js 06dfcef.js f40f709.js e96d531.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  06dfcef.js (246 KiB)
  f40f709.js (1.92 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1000 KiB). This can impact web performance.
Entrypoints:
  app (2.33 MiB)
      56ee819.js
      06dfcef.js
      f40f709.js
      e96d531.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
✔ Generated public .output/public                                                                                                                                     nitro 00:22:35
ℹ Generating output directory: public/                                                                                                                                      00:22:35
ℹ Generating pages                                                                                                                                                          00:22:37
✔ Client-side fallback created: 200.html                                                                                                                                    00:22:37
start Building server...                                                                                                                                              nitro 00:22:37
start Writing server bundle...                                                                                                                                        nitro 00:22:38
✔ Server built                                                                                                                                                        nitro 00:22:38
  ├─ .output/server/package.json (307 B) (183 B gzip)
  ├─ .output/server/index.mjs (458 B) (257 B gzip)
  ├─ .output/server/chunks/nitro/node-server.mjs.map (57.6 kB) (4.44 kB gzip)
  ├─ .output/server/chunks/nitro/node-server.mjs (17.1 kB) (5.5 kB gzip)
  ├─ .output/server/chunks/handlers/renderer.mjs.map (16.7 kB) (2.93 kB gzip)
  ├─ .output/server/chunks/handlers/renderer.mjs (12.6 kB) (4.09 kB gzip)
  ├─ .output/server/chunks/app/client.manifest.mjs.map (60.6 kB) (639 B gzip)
  └─ .output/server/chunks/app/client.manifest.mjs (42.7 kB) (7.52 kB gzip)
Σ Total size: 740 kB (155 kB gzip)
✔ You can preview this build using node .output/server/index.mjs                                                                                                      nitro 00:22:38
✔ You can now deploy .output/public to any static hosting!                                                                                                                  00:22:38

Process finished with exit code 0

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the shown router.ts configuration using nuxi generate, then compare its output with node .output/server/index.mjs. Inspect why static generation creates only the 200.html fallback instead of index.html and component folders. Done means the generated public output contains the pages needed for deployment to static hosting.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
build-system
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.