content icon indicating copy to clipboard operation
content copied to clipboard

Not working on target "server" without SSR

Open eddybrando opened this issue 3 years ago • 2 comments

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:

Screenshot 2022-02-17 at 18 26 55

What is actually happening?

The content is not fetched in the production build and the application throws the error:

Screenshot 2022-02-17 at 18 27 44

eddybrando avatar Feb 17 '22 17:02 eddybrando

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

learntheropes avatar Feb 18 '22 17:02 learntheropes

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

domnestcontact avatar Jun 01 '22 16:06 domnestcontact

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

SeryiBaran avatar Feb 28 '23 16:02 SeryiBaran

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.

learntheropes avatar Feb 28 '23 17:02 learntheropes