content
content copied to clipboard
Not working on target "server" without SSR
I'm facing an issue when trying to use @nuxt/content with the server target and the ssr option set to false in nuxt.config.js.
I have 2 files in the content directory:
- content
- bar.json
- foo.json
My index page looks like this:
<template>
<div>
{{ database }}
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async asyncData(context) {
const { error, $content } = context
const database = await $content()
.fetch()
.catch(() => {
error({
statusCode: 500,
message: 'Error!',
})
})
return { database }
},
data: () => ({
database: [],
}),
})
</script>
Version
@nuxt/content: 1.15.1 nuxt: 2.15.8
Reproduction Link
https://github.com/eddybrando/nuxt-content-server-ssr-false
Steps to reproduce
Run npm run dev. See how the page displays the fetched content.
Run npm run build && npm run start. See the error.
What is Expected?
The content should be fetched and displayed in the production build, like it does in the development build:

What is actually happening?
The content is not fetched in the production build and the application throws the error:

Same problem here with @nuxt/content: 1.15.1 nuxt: 2.15.0
See the repo here:
https://codesandbox.io/s/cranky-feather-fdhy25/
It works correctly on codesandbox with nuxt
But when deployed on Heroku with nuxt build && nuxt start it fails with page not found:
https://nuxt-server-content.herokuapp.com/
This is the heroku build log:
-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_PRODUCTION=true
NPM_CONFIG_LOGLEVEL=error
USE_YARN_CACHE=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
engines.yarn (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.14.0...
Using default npm version: 8.3.1
Resolving yarn version 1.22.x...
Downloading and installing yarn (1.22.17)
Installed yarn 1.22.17
-----> Restoring cache
- yarn cache
-----> Installing dependencies
Installing node modules (yarn.lock)
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@nuxt/content > @nuxt/types > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
[4/4] Building fresh packages...
Done in 9.30s.
-----> Build
Detected both "build" and "heroku-postbuild" scripts
Running heroku-postbuild (yarn)
yarn run v1.22.17
$ nuxt build
ERROR (node:906) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /tmp/build_6b4172a6/node_modules/@nuxt/components/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ Parsed 1 files in 0.4 seconds
ℹ Production build
ℹ Bundling only for client side
ℹ Target: static
ℹ Using components loader to optimize imports
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
WARN Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
ℹ Compiling Client
✔ Client: Compiled successfully in 9.24s
Hash: 83a1ea7ab6334c79c009
Version: webpack 4.46.0
Time: 9241ms
Built at: 02/18/2022 4:55:54 PM
Asset Size Chunks Chunk Names
../server/client.manifest.json 8.29 KiB [emitted]
10a6162.js 2.33 KiB 5 [emitted] [immutable] runtime
1c8727f.js 5.57 KiB 2 [emitted] [immutable] content/plugin.js
1e74fd6.js 93.9 KiB 7 [emitted] [immutable] vendors/content/plugin.js
3ce0c78.js 870 bytes 3 [emitted] [immutable] pages/blog/_slug
7074b6b.js 167 KiB 1 [emitted] [immutable] commons/app
75e7da6.js 48.8 KiB 0 [emitted] [immutable] app
LICENSES 390 bytes [emitted]
e86b926.js 903 bytes 4 [emitted] [immutable] pages/index
e9cb507.js 28.1 KiB 6 [emitted] [immutable] vendors/app
+ 1 hidden asset
Entrypoint app = 10a6162.js 7074b6b.js e9cb507.js 75e7da6.js
ℹ Generating output directory: dist/
ℹ Generating pages
✔ Generated route "/"
✔ Client-side fallback created: 200.html
Done in 12.16s.
-----> Pruning devDependencies
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@nuxt/content > @nuxt/types > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
[4/4] Building fresh packages...
warning Ignored scripts due to flag.
Done in 3.32s.
-----> Caching build
- yarn cache
-----> Build succeeded!
! Unmet dependencies don't fail yarn install but may cause runtime issues
https://github.com/npm/npm/issues/7494
-----> Discovering process types
Procfile declares types -> web
-----> Compressing...
Done: 57.6M
-----> Launching...
Released v10
https://nuxt-server-content.herokuapp.com/ deployed to Heroku
i am also having the same issue. Working fine in the development server. As soon as it is moved to production, it shows the error message. it doesn't show the md file. Is there any resolution
i am also having the same issue. Working fine in the development server. As soon as it is moved to production, it shows the error message. it doesn't show the md file. Is there any resolution
Same issue on Github Pages
Guys the solution is to set ssr to true.
There is no good reason to set it to false on Nuxt and this is never going to be fixed since it is a deprecated version.