Missing document.template.mjs running nuxi dev after upgrading bridge version

ElectroMW commented 2 years ago

Environment

Operating System: Linux
Node Version: v14.19.0
Nuxt Version: 2.16.0-27358576.777a4b7f
Package Manager: npm@7.5.4
Builder: webpack
User Config: app, bridge, sitemap, components, dev, typescript, build, styleResources, modern, auth, css, publicRuntimeConfig, privateRuntimeConfig, generate, head, loading, ssr, target, render, modules, buildModules, googleFonts, purgeCSS, gtm, plugins, router, image, cookies, axios
Runtime Modules: @nuxtjs/axios@5.13.6, @nuxtjs/auth-next@5.0.0-1643791578.532b3d6, @nuxtjs/gtm@2.4.0, vue-scrollto/nuxt, cookie-universal-nuxt@2.1.5, nuxt-cookie-control@1.9.91, vue-social-sharing/nuxt, @nuxtjs/sitemap@2.4.0, @nuxt/image@0.6.2
Build Modules: @nuxtjs/style-resources@1.2.1, @nuxtjs/google-fonts@1.3.0, nuxt-purgecss@1.0.0, nuxt-storm@1.1.3, @nuxt/bridge@3.0.0-27530716.c4f8671

Reproduction

Upgrading from 3.0.0-27468803.23e7afb to 3.0.0-27530716.c4f8671 Run command nuxi dev

Describe the bug

Cannot find module '/home/xxxxx/.nuxt/views/document.template.mjs' imported from /home/xxxx/.nuxt/dev/index.mjs

Additional context

Using nuxt.config.ts - bridge specific settings

app:{}, bridge: { vite: false, transpile: true },

Logs

No response

phoenix-ru commented 2 years ago

@danielroe

After hours of debugging, I've found the source of the issue which is now haunting our projects. It lies in the presence of app.html in the project root. As soon as you rename/remove the file, the build issues are gone (but you are not able to use template anymore)

This is from the old nuxt's config package (which is resolved as node_modules/@nuxt/config-edge) https://github.com/nuxt/nuxt.js/blob/777a4b7f5033c86c37cbd93008f3ca792e4af8bc/packages/config/src/options.js#L209

This is part from the Bridge: https://github.com/nuxt/bridge/blob/75e046fdede043cf417bce45a27b4ffe6faaa075/src/nitro.ts#L389

If you look closely, whenever your project root (let's call it srcDir) has app.html file, @nuxt/config-edge will set options.appTemplatePath to srcDir/app.html.

Then @nuxt/bridge will enter writeDocumentTemplate and there it would rename app.html to app.mjs and write this file to srcDir/app.mjs.

Finally, this code: https://github.com/nuxt/framework/blob/d9b6c8a59bd4f1f1f6280e1d55d10ddd477d2eea/packages/nuxt/src/core/runtime/nitro/renderer.ts#L13

It will inject import htmlTemplate, but from buildDir. As you already noticed, no file has been written to it, which leads to the issue.

P.S. I do hope that this reproduction is enough, although I can create a reproduction repository if needed.

P.S.S. I see a straightforward way of fixing it by writing directly to buildDir instead of leaving the template file where it was. I can temporarily fix it in our projects using a build module, but would like this to be documented or solved automatically (probably with deprecation warning and further instructions)

phoenix-ru commented 2 years ago

In case someone is interested in workaround before the official patch, this code works for me on Nuxt CLI v3.0.0-rc.3-27545866.cd37a21

Create a build module and add it to config.buildModules

// modules/build/migration.ts
import { defineNuxtModule } from '@nuxt/kit'
import { Nuxt } from '@nuxt/schema'
import fs from 'fs'
import path from 'path'

export default defineNuxtModule({
  meta: {
    name: 'MigrationModule'
  },

  hooks: {
    /**
     * Fixes the issue with missing `document.template.mjs`
     * @param builder
     */
    'build:done' (builder: { nuxt: Nuxt }) {
      const buildDir = builder.nuxt.options.buildDir
      const srcDir = builder.nuxt.options.srcDir

      const targetTemplatePath = path.join(buildDir, './views/app.template.html')

      const appTemplate = fs.readFileSync(path.join(srcDir, './app.html'))
      fs.writeFileSync(targetTemplatePath, appTemplate)

      builder.nuxt.options.appTemplatePath = targetTemplatePath
    }
  }
})

nuxt / bridge