renderStyles does not render styles for app.vue dependencies

Environment

$ npx nuxi info
npx: installed 2 in 2.623s
Nuxt CLI v3.0.0-27338323.1e98259                                                                                                                                                                                                20:33:25
RootDir: /srv/app                                                                                                                                                                                                        20:33:25
Nuxt project info:                                                                                                                                                                                                              20:33:25

------------------------------
- Operating System: `Linux`
- Node Version:     `v14.17.6`
- Nuxt Version:     `latest`
- Package Manager:  `unknown`
- Bundler:          `Webpack`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

👉 Report an issue: https://github.com/nuxt/nuxt.js/issues/new                                                                                                                                                                  20:33:25  

👉 Suggest an improvement: https://github.com/nuxt/nuxt.js/discussions/new

👉 Read documentation: https://nuxtjs.org

^ Bundler reports Webpack, but it’s actually Vite fyi

Running in Docker node-alpine container

Reproduction

With some basic test components with scoped styles, run npx nuxi build. Nuxt build rolls up the styles into bootstrap CSS file, but nothing seems to load the styles in the browser.

export default defineNuxtConfig({
  srcDir: 'context/',
  server: {
    port: process.env.NITRO_PORT
  },
  vite: {
    logLevel: process.env.ENV === 'development' ? 'warn' : 'info',
    server: {
      watch: {
        usePolling: true
      }
    }
  },
  // buildModules: [
  //   '@nuxtjs/pwa'
  // ],
  pwa: {
    manifest: {
      name,
      short_name: name,
      description
    },
    meta: {
      theme_color: theme || undefined,
      name,
      title: name,
      description,
      host
    }
  }
})

Describe the bug

The bootstrap.{hash}.css file that the browser runtime loads from /_nuxt/assets/ reports as having no data, and the rolled up styles never get loaded on the page.

However, A) other assets load fine, and B) hitting the css file URL directly shows the correct output. Also, dev build is fine.

Does something need to be configured to tell nuxt to load the styles?

The following from .output/server/chunks/app/render.mjs#getSPARenderer seems to not be getting run:

renderStyles: () => entryFiles.flatMap(({ css }) => css).filter((css) => css != null).map((file) => <link rel="stylesheet" href="${publicPath}${file}">).join(""),

With manifest data:

const client_manifest = {
  "../node_modules/nuxt3/dist/app/entry.mjs": {
    "file": "entry-702f5983.mjs",
    "src": "../node_modules/nuxt3/dist/app/entry.mjs",    
    "isEntry": true,
    "dynamicImports": [
      "../node_modules/nuxt3/dist/app/bootstrap.mjs"      
    ]
  },
  "../node_modules/nuxt3/dist/app/bootstrap.mjs": {       
    "file": "bootstrap-a06256d2.mjs",
    "src": "../node_modules/nuxt3/dist/app/bootstrap.mjs",
    "isDynamicEntry": true,
    "css": [
      "assets/bootstrap.7234385c.css"
    ]
  }
};

curl localhost:8080 | grep stylesheet on the SSR side also doesn’t have any hits.

The output of the log here is empty array:

function renderStyles(ssrContext, rendererContext) {
  const { styles } = getRequestDependencies(ssrContext, rendererContext);
        console.log(Object.values(styles))
  return Object.values(styles).map(({ path }) => `<link rel="stylesheet" href="${rendererContext.publicPath}${path}">`).join("");
}

and log of getRequestDependencies is:

{
  scripts: {
    '../node_modules/nuxt3/dist/app/entry.mjs': { path: 'entry-702f5983.mjs', type: 'module' }
  },
  styles: {},       <----------------------- WTH????
  preload: {
    '../node_modules/nuxt3/dist/app/entry.mjs': { path: 'entry-702f5983.mjs', type: 'module' }
  },
  prefetch: {
    '../node_modules/nuxt3/dist/app/bootstrap.mjs': { path: 'bootstrap-a06256d2.mjs', type: 'module' },
    'assets/bootstrap.7234385c.css': { path: 'assets/bootstrap.7234385c.css' }
  }
}

FYI, there is NO ../node_modules in my container (I wipe them after a build; and there is no nuxt3 dir in the .output node_modules.)

Going to try without wiping modules and see if that works.

UPDATE: That (^) did not work.

This is looking more like a legit bug: styles are just not rendering.

UPDATE: As a super basic nuxt setup, I was using app.vue. If using pages/index.vue, styles load correctly.

So… This is either a legit bug that should be fixed, OR app.vue should be documented as totally deprecated (I was under the impression app.vue vs. pages framework was optional)?

Additional context

https://github.com/nuxt/framework/blame/main/packages/nitro/src/runtime/app/render.ts https://github.com/nuxt/framework/commits/main/packages/nitro/src/runtime/app/render.ts

Logs

No response

[StevenJPx2]

For those who need to use Nuxt 3 without this bug, I’ve noticed that builds ‘v3.0.0-27272804.ca557e7’ and ‘v3.0.0-27319101.3e82f0f’ do not have this issue.

[StevenJPx2]

I have been facing A similar issue, where CSS styles don’t render at build but are all fine in dev. The nuxt-welcome component loads the style with no problems in both dev and build though.