Render warning with nuxt

Hello there, I have a problem when rendering svgs in my nuxt project. It always shows me the following warning in the browser console: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I am using the default config from the Readme file.

build: {
  /*
  ** 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)/,
      });

      const vueRule = config.module.rules.find(rule => {
        return rule.test.test('.vue');
      });
      vueRule.use = [
        {
          loader: vueRule.loader,
          options: vueRule.options,
        },
        {
          loader: 'vue-svg-inline-loader',
        },
      ];
      delete vueRule.loader;
      delete vueRule.options;
    }
  },
},

Is there anything wrong with the configuration or am I just missing anything or is it supposed to be like that? Thanks in advance!

[oliverfindl]

Hello,

I finally figured what is going on. You have modified vue rule in condition if (ctx.isDev && ctx.isClient) { /* ... */ }, but it has to be outside. This resulted in nuxt not using loader in ssr. If you move the code outside that condition it will work.

Please give feedback if it solved your issue.

Thanks

[oliverfindl]

Glad to hear!