$cookie is undefined in app about cookie-universal

[microcipcip]

@sinneren you are using the serverMiddleware which AFAIK, does not have the app object. The typical middleware properties for Express are req, res, next, therefore if you want to use the cookies package directly in the serverMiddleware you have to install the cookie-universal package:

npm i --save cookie-universal

Then you can do this:

export default (req, res, next) => {
  const cookies = require('cookie-universal')(req, res)
  cookies.set('cookie-name', 'cookie-value')
  next()
}

If you want to use the cookie-universal library across multiple serverMiddleware routes you can expose it in the first Middleware, for example you could create the cookies.js file:

export default (req, res, next) => {
  req.cookies = require('cookie-universal')(req, res)
  next()
}

Then add it as first serverMiddleware in the nuxt config:

  serverMiddleware: [
        '~/serverMiddleware/cookies.js',
        '~/serverMiddleware/mod.js',
    ],

Now you can use it in the mod.js serverMiddleware like this:

export default (req, res) => {
  req.cookies.get('cookie-name')
}

[microcipcip]

@sinneren I've realised now why it is confusing, I should have written middleware and not server middleware in the documentation. I will improve the documentation when I've got the time. Thanks for pointing it out lol.

[microcipcip]

Hi @sinneren, there is only a typo in the name, it is $cookies not $cookie.

[sinneren]

Hi @sinneren, there is only a typo in the name, it is $cookies not $cookie.

yes. just here. but $cookies too.

 ERROR  Cannot read property '$cookies' of undefined                                                                                                            16:36:51

  at default (serverMiddleware/mod.js:2:21)
  at call (node_modules/connect/index.js:239:7)
  at next (node_modules/connect/index.js:183:5)
  at next (node_modules/connect/index.js:161:14)
  at SendStream.error (node_modules/serve-static/index.js:121:7)
  at SendStream.emit (events.js:210:5)
  at SendStream.EventEmitter.emit (domain.js:478:20)
  at SendStream.error (node_modules/send/index.js:270:17)
  at SendStream.onStatError (node_modules/send/index.js:421:12)
  at next (node_modules/send/index.js:763:28)

parts of my config:

mode: 'universal',
modules: [
      'cookie-universal-nuxt',
      '~/modules/error',
      '~/modules/access',
      ['nuxt-env', {
        keys: [
          'nuxtEnvConfig',
        ]
      }]
    ],
   
    serverMiddleware: [
        '~/serverMiddleware/mod.js',
    ],
buildModules: [
      '@nuxtjs/eslint-module'
],
build: {
        extend (config, ctx) {
            config.resolve.modules = [
                path.resolve(__dirname, '/usr/local/lib/node_modules'),
                path.resolve(__dirname, 'node_modules')
            ]
            config.resolveLoader.modules = [
                path.resolve(__dirname, '/usr/local/lib/node_modules'),
                path.resolve(__dirname, 'node_modules')
            ]

            if (ctx.isDev && ctx.isClient) {
                config.module.rules.push({
                    enforce: "pre",
                    test: /\.(js|vue)$/,
                    loader: "eslint-loader",
                    exclude: /(node_modules)/
                })
            }
        }
    },

[sinneren]

Ok, thanks, but your example using app :D

[matamune94]

me too, i use global Mixin
import Vue from 'vue'

Vue.mixin({
methods: {
$_setCookies (cookieName, obj = {}) {
console.log(this.$cookies)
const info = this.$cookies.get(cookieName) || {}
this.$cookies.set(cookieName, { ...info, ...obj }, {
path: '/',
maxAge: 60 * 60 * 24 * 7
})
}
}
})

And this.$cookie is undefined

[matamune94]

im install cookie-universal-nuxt
but when i check package this plugin

{
  "name": "cookie-universal",
  "version": "2.1.1",
  "description": "Universal cookie plugin, perfect for SSR",
  "main": "dist/cookie-universal-common.js",
  "author": "Salvatore Tedde <[email protected]>",
  "license": "MIT",
  "bugs": "https://github.com/microcipcip/cookie-universal/issues",
  "homepage": "https://github.com/microcipcip/cookie-universal/tree/master/packages/cookie-universal#readme",
  "repository": "https://github.com/microcipcip/cookie-universal/tree/master/packages/cookie-universal",
  "scripts": {
    "build": "webpack",
    "demo-node": "nodemon ./demo/server.js",
    "demo-express": "nodemon ./demo/server-express.js",
    "dev": "nodemon index.js --exec \"npm run lint && node\"",
    "lint": "eslint index.js",
    "test-nodemon": "nodemon --exec \"npm run testlint && npm run mocha\"",
    "test": "npm run testlint && npm run mocha",
    "testlint": "eslint **/*.spec.js",
    "mocha": "mocha \"./{,!(node_modules)/**/}*.spec.js\""
  },
  "keywords": [
    "universal cookie",
    "SSR cookie",
    "node cookie",
    "browser cookie",
    "cookies",
    "cookie"
  ],
  "publishConfig": {
    "access": "public"
  },
  "dependencies": {
    "@types/cookie": "^0.3.3",
    "cookie": "^0.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "chai": "^4.1.2",
    "chai-http": "^3.0.0",
    "clean-webpack-plugin": "^0.1.17",
    "date-fns": "^1.29.0",
    "eslint": "^4.3.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "express": "^4.16.2",
    "jsdom": "^11.5.1",
    "mocha": "^4.0.1",
    "prettier": "^1.15.3",
    "webpack": "^3.10.0",
    "webpack-merge": "^4.1.1"
  },
  "files": [
    "dist/",
    "types/index.d.ts"
  ],
  "typings": "types/index.d.ts",
  "gitHead": "51647acb1c22f48d17b9dfb0044cbaeb56038ef4"
}

[microcipcip]

@matamune94 are you using Nuxt or vanilla Vue? If you install and use it with Nuxt, it should work. If you need it in vanilla Vue you have to install cookie-universal, not cookie-universal-nuxt, but in that case you have to initialize the cookie instance yourself.

[matamune94]

oh, im using Universal Storage Module, thanks so much support

[microcipcip]

@matamune94 Yeah that library does not use cookie-universal-nuxt, it uses the cookie library directly.