bridge: Build fails with SSR turned off

Considering this issue has been open for more than a month now without any progress on the matter, does anyone maybe know of a temporary fix that may work?

you could turn off nitro temporary

• nuxt.config.ts

defineNuxtConfig({
   bridge: {
       nitro: false
   }
})

any update on this?

I created a work a round, that makes it possible to build without using a fork:

// nuxt.config.ts

import fs from 'node:fs';
import path from 'node:path';
import { defineNuxtConfig } from '@nuxt/bridge';

export default defineNuxtConfig({
  hooks: {
    'build:done': (builder) => {
      const extraFilePath = path.join(
        builder.nuxt.options.buildDir + '/dist/server',
        'server.mjs'
      );
      fs.writeFileSync(extraFilePath, 'export {};');
    }
  }
});

This will put a file in the proper directory just before rollup needs it.

Same here. Build works with ssr: false and target: static only, but static output is strange and can’t figure out how to properly serve it

It’s not working atm

Hi @rodrigogs. It seems an issue with upgrade process. Can you please remove node_modules directory and use npx nuxi upgrade --force?

I always delete node_modules, package-lock and reinstall everything.

Apparently the recently launched version 3.0.0-27383827.b803fdb fixes the problem, but I still cannot build it with nitro.

 ERROR  Rollup error: Could not load /home/rodrigosilva/Workspace/juquinha/modules/web/node_modules/.cache/nuxt/dist/server/server.mjs (imported by ../../node_modules/.pnpm/@nuxt+nitro-edge@3.0.0-27383827.b803fdb_acorn@8.7.0/node_modules/@nuxt/nitro-edge/dist/runtime/app/render.mjs): ENOENT: no such file or directory, open '/home/rodrigosilva/Workspace/juquinha/modules/web/node_modules/.cache/nuxt/dist/server/server.mjs'


 FATAL  Could not load /home/rodrigosilva/Workspace/juquinha/modules/web/node_modules/.cache/nuxt/dist/server/server.mjs (imported by ../../node_modules/.pnpm/@nuxt+nitro-edge@3.0.0-27383827.b803fdb_acorn@8.7.0/node_modules/@nuxt/nitro-edge/dist/runtime/app/render.mjs): ENOENT: no such file or directory, open '/home/rodrigosilva/Workspace/juquinha/modules/web/node_modules/.cache/nuxt/dist/server/server.mjs'




   ╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                                                      │
   │   ✖ Nuxt Fatal Error                                                                                                                                 │
   │                                                                                                                                                      │
   │   Error: Could not load /home/rodrigosilva/Workspace/juquinha/modules/web/node_modules/.cache/nuxt/dist/server/server.mjs (imported by               │
   │   ../../node_modules/.pnpm/@nuxt+nitro-edge@3.0.0-27383827.b803fdb_acorn@8.7.0/node_modules/@nuxt/nitro-edge/dist/runtime/app/render.mjs): ENOENT:   │
   │   no such file or directory, open '/home/rodrigosilva/Workspace/juquinha/modules/web/node_modules/.cache/nuxt/dist/server/server.mjs'                │
   │                                                                                                                                                      │
   ╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

I think this issue should be reopened then.

@crazymind Please try to keep your comments on-topic. They notify a lot of people. File a new issue or discussion for your unrelated question.

I think @crazymind 's comment is totally related to this issue. It seems that disabling nitro is not even a temporary fix to this bug, because you will not be able to use nuxt properly…

New reproduction with the latest version of @nuxt/bridge (npm:@nuxt/bridge-edge@^3.0.0-27530716.c4f8671):

1. git clone git@github.com:HendrikJan/nuxt-bridge-error-demo.git
2. npm install
3. npx nuxi build
4. Error: " ERROR Rollup error: Could not load /home/me/nuxt-bridge-error-demo/.nuxt/dist/server/server.mjs (imported by node_modules/@nuxt/bridge/dist/runtime/nitro/renderer.mjs): ENOENT: no such file or directory, open ‘/home/me/nuxt-bridge-error-demo/.nuxt/dist/server/server.mjs’"

The problem is still there.

This issue exists in Nuxt 3 as well, can’t really disable nitro there. Atleast not with nitro: false in config file.

Confirm. Tested on 3.0.0-27495976.e31c604 And I also use Nuxt3 (without bridge), and seems there is no workaround for this case.

If anyone has the same problems (build success, but no entry point), here is script that generates index.html from build result. Just run it from the root of the project (node generateIndexHtml.mjs):

// Nuxt 3 not support building SPA for now
// track: nuxt/bridge#27
// Create entry point index.html manually
// Must be call from root dir

console.log('Generating index.html...')

import fs from 'fs'
import path from 'path'

const serverSource = fs.readFileSync(path.resolve('.output/server/chunks/nitro/server.mjs'), 'utf-8')
const clientManifest = JSON.parse(fs.readFileSync(path.resolve('.output/public/_nuxt/manifest.json'), 'utf-8'))

const runtimeConfigMatch = serverSource.match(/const _runtimeConfig =(.*)/)

if (!runtimeConfigMatch) {
    console.log('_runtimeConfig not found in server.mjs, nuxt update?')
    process.exit(1)
}

let runtimeConfig = {}
eval('runtimeConfig = ' + runtimeConfigMatch[1])
const publicConfig = runtimeConfig.public

let css = []
let entryFile = ''

Object.values(clientManifest).forEach(fileConfig => {
    if (fileConfig.isEntry) {
        entryFile = fileConfig.file
    }

    if (fileConfig.css?.length) {
        css = [ ...css, ...fileConfig.css ]
    }
})

console.log({
    entryFile,
    css,
    publicConfig
})

const resultHtml = `<!DOCTYPE html>
<html>

<head>
 ${css.map(cssSrc => `<link rel="stylesheet" href="/_nuxt/${cssSrc}">`).join(`
 `)}
</head>

<body>
    <div id="__nuxt"></div>
    <script>window.__NUXT__={ serverRendered:false, config: ${JSON.stringify(publicConfig)} }</script>
    <script type="module" src="/_nuxt/${entryFile}"></script>
</body>
</html>
`

fs.writeFileSync(path.resolve('.output/public/index.html'), resultHtml)

console.log('Done')

thanks bro, it works for me

@rodrigogs you can change node_module/…/bridge/vite/server.ts ssr:true to ssr:false and give it a try (the file looks the same as the one I linked in the comment above) @pi0 Would it make sense to replicate ssr: ctx.nuxt.options.ssr ?? true in Bridge? I am fresh to Nuxt 3 and have no idea what needs to be replicated in Bridge and what doesn’t.

@rodrigogs I actually dont get an error but no .output or .dist content is generated. It seems like it might be generating under .nuxt/dist but that folder has both client and server folders and the client folder contains no index.html

This is on the latest version of @nuxt/bridge 3.0.0-27338323.1e98259

to build your project first run nuxi build then nuxi generate

Same here. Build works with ssr: false and target: static only, but static output is strange and can’t figure out how to properly serve it

and serve it with nuxt start

Yeah, my pull request (#2191) doesn’t seem to have actually fixed this issue. It’s working in Nuxt’s playground directory, but for some reason, if you actually create a project, Rollup still thinks it needs to import #build/dist/server/server.mjs.

I hop fixing this bug be a priority for Nuxt team. I know you are busy on the Nuxt3 it self but as a matter of fact Vuetify is one of most popular component frameworks for Vue and they are so slow on migrating to Vue3. Me my self am trying to replace it with pure css frameworks like tailwind but until then it is not possible for me to switch to Nuxt3. Meanwhile i have to make the hole project ready for Vue3 and Nuxt3 and it is lots of work! so i choose bridge as the best migration option. but after #320 i kinda stuck!

Because of this bug I needed to disable nitro as well. Now running in to the next issue: $fetch is not defined

I read that:

Nitro allows ‘direct’ calling of routes via the globally-available $fetch helper.

Therefore I assume this will cause a chain reaction as $fetch will not be available and other libraries depending on it. I tried to install ohmyfetch and node-fetch manually – no luck. Also tried to inject $fetch as a plugin – also no luck. Anyone an idea how to fix this?

If anyone has the same problems (build success, but no entry point), here is script that generates index.html from build result. Just run it from the root of the project (node generateIndexHtml.mjs):

// Nuxt 3 not support building SPA for now
// track: nuxt/bridge#27
// Create entry point index.html manually
// Must be call from root dir

console.log('Generating index.html...')

import fs from 'fs'
import path from 'path'

const serverSource = fs.readFileSync(path.resolve('.output/server/chunks/nitro/server.mjs'), 'utf-8')
const clientManifest = JSON.parse(fs.readFileSync(path.resolve('.output/public/_nuxt/manifest.json'), 'utf-8'))

const runtimeConfigMatch = serverSource.match(/const _runtimeConfig =(.*)/)

if (!runtimeConfigMatch) {
    console.log('_runtimeConfig not found in server.mjs, nuxt update?')
    process.exit(1)
}

let runtimeConfig = {}
eval('runtimeConfig = ' + runtimeConfigMatch[1])
const publicConfig = runtimeConfig.public

let css = []
let entryFile = ''

Object.values(clientManifest).forEach(fileConfig => {
    if (fileConfig.isEntry) {
        entryFile = fileConfig.file
    }

    if (fileConfig.css?.length) {
        css = [ ...css, ...fileConfig.css ]
    }
})

console.log({
    entryFile,
    css,
    publicConfig
})

const resultHtml = `<!DOCTYPE html>
<html>

<head>
 ${css.map(cssSrc => `<link rel="stylesheet" href="/_nuxt/${cssSrc}">`).join(`
 `)}
</head>

<body>
    <div id="__nuxt"></div>
    <script>window.__NUXT__={ serverRendered:false, config: ${JSON.stringify(publicConfig)} }</script>
    <script type="module" src="/_nuxt/${entryFile}"></script>
</body>
</html>
`

fs.writeFileSync(path.resolve('.output/public/index.html'), resultHtml)

console.log('Done')

Guys, am I stupid or is there no reason for this line? Commenting it out builds the server and running it works, the only issue I have with it is that I lose the css from app.vue, which does not seem to get requested from the client.

If it’s already in version 3.0.0-27313139.1c88580, then it’s still not working.

Same error as before.

I can’t believe an empty file could solve this problem! Thanks a lot @rvmourik

Updating @nuxt/bridge solved this issue for me (Note: I had problems running my app locally without ssr and not building – but the error was the same).

This commit on the 13. April solved it: 77db7ed

I upgraded to 3.0.0-27530716.c4f8671 which should include that commit but I still get the exact same error… Am I missing something?

I hope so too. We are waiting for Vuetify 3 too before we can move to the real Nuxt 3 (really looking forward to that!). Currently using nuxi dev instead of nuxi build but that’s not a solution when our production goes live 🙃.

This issue still exists. Disabling nitro for production fixes the issue.

Facing the same issue, followed the workaround given by disabling nitro only in production build(s)

bridge: {
    nitro: process.env.NODE_ENV !== 'production',
    autoImports: true,
  },

"scripts": {
    "dev": "export NODE_OPTIONS=--openssl-legacy-provider; nuxi dev",
    "start": "export NODE_OPTIONS=--openssl-legacy-provider; nuxi preview",
    "generate": "export NODE_OPTIONS=--openssl-legacy-provider; nuxi generate",
},

PS. Ignore the export NODE_OPTIONS bit, I have to use it cause of Node v17.

Now, Nitro works in dev, but while bundling, it’s disabled 😄

Any updates here? I’m trying on v3.0.0-27394404.1672148, and build success but there is no entry point in .output/public/ like index.html Nuxt3 project.

What?

I have ssr: false in nuxt.config.js

@rodrigogs it’s works, i made a mistake, generate dir should be /dist，but i view in to /.nuxt/dist/ . and thanks @AllInOneYT . I write the complete steps below, hoping to help others.

1. config:

// nuxt.config.js
const config = defineNuxtConfig({
  ssr:false,
  target:"static",
  bridge: {
      nitro:false,
   },
})

1. command:

nuxi generate

1. check dir /dist/

my env:

- Operating System: `Darwin`
- Node Version:     `v16.13.1`
- Nuxt Version:     `2.16.0-27355697.777a4b7f`
- Package Manager:  `yarn@1.22.17`
- Bundler:          `Webpack`
- User Config:      `build`, `bridge`, `buildModules`, `meta`, `css`, `plugins`, `components`, `ssr`, `target`, `modules`
- Runtime Modules:  `-`
- Build Modules:    `@nuxt/bridge@3.0.0-27338323.1e98259`, `@nuxt/bridge@3.0.0-27338323.1e98259`, `@nuxt/bridge@3.0.0-27338323.1e98259`, `@nuxt/bridge@3.0.0-27338323.1e98259`, `@vueuse/core/nuxt@7.5.1`, `@pinia/nuxt@0.1.5`, `@nuxtjs/eslint-module@3.0.2`, `@nuxtjs/stylelint-module@4.1.0`

@rodrigogs I actually dont get an error but no .output or .dist content is generated. It seems like it might be generating under .nuxt/dist but that folder has both client and server folders and the client folder contains no index.html

This is on the latest version of @nuxt/bridge 3.0.0-27338323.1e98259

Considering this issue has been open for more than a month now without any progress on the matter, does anyone maybe know of a temporary fix that may work?

you could turn off nitro temporary

• nuxt.config.ts

defineNuxtConfig({
   bridge: {
       nitro: false
   }
})

not work for me

It works for me, what is the error when you disable nitro?

but it doesn’t work with nuxt3

Considering this issue has been open for more than a month now without any progress on the matter, does anyone maybe know of a temporary fix that may work?

you could turn off nitro temporary

• nuxt.config.ts

defineNuxtConfig({
   bridge: {
       nitro: false
   }
})

not work for me