Vue-loader: "_ssrNode" is not defined on the instance but referenced during render

[peteringram0]

Still getting SSR errors with 12.2.2

Version

12.2.2

Steps to reproduce

(found in )
(found in )
(found in )
(found in )
TypeError: _vm._ssrClass is not a function

[chrisnicola]

I'm seeing this same thing from avoriaz unit tests trying to update to vue 2.4.1 also seeing it with vue-loader 13.0.2. Not seeing it when actually loading in dev mode though.

[chrisnicola]

Ah I found the solution. In testing I have a target of node which causes optimizeSSR to be set to true. Forcing this back to false was the fix.

[peteringram0]

How are u changing the target? Thanks

[chrisnicola]

@peteringram0 it's part of webpack's config target: 'node' is what I use when compiling code for running unit tests for tape however I don't normally compile with that target, just for testing. If you are actually using SSR then you would have that set in your server-side bundle, but not for your client-side bundle.

[lsycxyj]

I've met the same problem in the server side after I update to vue 2.4.1 but it'll impact the performance if I turn optimzeSSR to be set to false.

[peteringram0]

Turning target to web or false doesn't solve the issue for me.

[chrisnicola]

@peteringram0 can you post your webpack config? The optimiseSSR flag is for the vue-loader's config and target is a root value on the webpack config.

[zhanziyang]

Same problem after updating to [email protected].
I'm using nuxt.

[LinusBorg]

Can anyone provide a runnable reproduction in a repository? The error message alone is not of much help to resolve this.

[zhanziyang]

Updating to [email protected] solves my problem.

[privatenumber]

@zhanziyang I used the dev branch of NUXT, which installs [email protected] still shows the error, however, only on the front-end this time (instead of the backend):

[LinusBorg]

I reaffirm my request:

Can anyone provide a runnable reproduction in a repository? The error message alone is not of much help to resolve this.

[privatenumber]

@LinusBorg
I've created a repository that reproduces the issue.

This is the NUXT server consuming the component built with target: node. The immediate error upon visiting the server is: TypeError: _vm._ssrNode is not a function

This is the test component built with target: node.

Note that the latest release of NUXT (v1.0.0-alpha.4) doesn't use the latest version of Vue-loader, but their dev branch does.

[privatenumber]

@LinusBorg Any insights?

[LinusBorg]

Not yet, sorry. I was away with friends over the weekend and didn't get to this.

[LinusBorg]

@hirokiosame So I tooka quick not at what you have setup, but didn#t run it yet.

The issue I see right now is that you compiled the seperate component with target: node which makes it only usable on the server. It relies on the server renderer providing information that is missing during client-side render.

So:

1. Your reproduction can be fixed by compiling the component without target: node
2. I'm not sure wether this is a true reproduction of the problem other people described, beause in a normal SSR setup, your components would be compiled twice, once for the server bundle, once for for client bundle - So your demo situation should not happen unless people would compiel their client-bundle with target: node (which makes no sense.

[LinusBorg]

Back to square one: Reproduction is required.

[feload]

I had to remove "target" property from webpack config file in order to make it work.

[varna]

I had same problem with my Nuxt project, so I did (stole it from LinusBorg commit):

  build: {
    extend (config, ctx) {
      config.module.rules.forEach((rule) => {
        if (rule.test.toString() === '/\\.vue$/') {
          rule.options.optimizeSSR = false
        }
      })
    }
  }

in nuxt.config.js

[p8ul]

Adding optimizeSSR: false option on vue-loader loader and including extract-text-webpack-plugin, worked for me
webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module: {
loaders: [{ test: /.vue$/, loader: 'vue-loader', options: {extractCSS: true,optimizeSSR: false },
},
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},

---

plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new BundleTracker({filename: './webpack-stats.json'}),
new ExtractTextPlugin("styles.css"),
],
target: 'node'

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('./app_dir/static'),
    }
 },

[yyx990803]

For anyone who stumbles into this again:

• You are likely setting target: 'node' in your webpack config but for whatever reason not expecting to produce an SSR-oriented bundle.

The solution is

• either remove target: 'node' if you don't need it
• OR: set optimizeSSR: false in vue-loader options.

[cocodrino]

hi @yyx990803 I'm having the same issue and I'm a bit newbie with nuxt, can you explain me what I need add to my nuxt.config.js???
right now my build is

build: {
    //vendor: ['axios'],
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/]
          })
        ]
      }
    }
  }

thank you...

[LinusBorg]

This isssue is

1. Closed
2. 5 months old
3. Not a support forum.

Please use forum.vuejs.org