vuejs/vue-ssr-webpack-plugin and webpack 5 #11718

borodadada · 2020-10-12T10:17:40Z

What problem does this feature solve?

github missing repository vuejs/vue-ssr-webpack-plugin, i update webpack to version 5 and have error
[vue-server-renderer-webpack-plugin] webpack config output.libraryTarget should be "commonjs2".

What does the proposed API look like?

in my output.libraryTarget is libraryTarget: 'commonjs2'

The text was updated successfully, but these errors were encountered:

darkangel081195 · 2020-10-18T16:04:55Z

I am facing same issue when updated to webpack 5 today. My current versions are"webpack": "5.0.0-rc.6", "vue-server-renderer": "2.6.10".

borodadada · 2020-10-18T17:14:18Z

yep.... problem not quit, i use
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
so sad

efremenkovan · 2020-10-28T08:44:24Z

I am facing the same problem. What I found out is that it seem like in webpack 5 compiler.options.output.libraryTarget was replaced with compiler.options.output.library.type. Not sure if it's always so 'cause I didn't find any information about that in changelog. To pass the validation I had to change validation function of the loader like this:

var validate = function (compiler) {
  if (compiler.options.target !== 'node') {
    warn('webpack config `target` should be "node".');
  }
-  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
+  if (compiler.options.output && compiler.options.output.library.type !== 'commonjs2') {
    warn('webpack config `output.libraryTarget` should be "commonjs2".');
  }

  if (!compiler.options.externals) {
    tip(
      'It is recommended to externalize dependencies in the server build for ' +
      'better build performance.'
    );
  }
};

Also, again, in my case, entry points are now objects with name and size fields. So I had to modify stuff below:

- var entryAssets = entryInfo.assets.filter(isJS);
+ var entryAssets = entryInfo.assets.filter(file => isJS(file.name));

if (entryAssets.length > 1) {
  throw new Error(
    "Server-side bundle should have one single entry file. " +
    "Avoid using CommonsChunkPlugin in the server config."
  )
}

var entry = entryAssets[0];
- if (!entry || typeof entry !== 'string') {
+ if (!entry || typeof entry.name !== 'string') {
  throw new Error(
    ("Entry \"" + entryName + "\" not found. Did you specify the correct entry option?")
  )
}

var bundle = {
+ entry: entry.name,
  files: {},
  maps: {}
};

After these changes my bundle compiled correctly.

efremenkovan · 2020-10-28T09:18:37Z

Also, I think it's worth mentioning that even after my build succeeded I couldn't launch my bundle due to this error:

TypeError: Cannot read property 'file' of undefined
    at {{YOUR_PATH_TO_PROJECT}}/node_modules/vue-server-renderer/build.dev.js:9074:24

The problem was in function that starts on line 9056:

TemplateRenderer.prototype.renderScripts = function renderScripts (context) {
  var this$1 = this;

  if (this.clientManifest) {
    var initial = this.preloadFiles.filter(function (ref) {
        var file = ref.file;

        return isJS(file);
      });
    var async = (this.getUsedAsyncFiles(context) || []).filter(function (ref) {
        var file = ref.file;

        return isJS(file);
      });
-   var needed = [initial[0]].concat(async, initial.slice(1));
+   var needed = (initial.length ? [initial[0]] : []).concat(async, initial.slice(1));
    return needed.map(function (ref) {
        var file = ref.file;

      return ("<script src=\"" + (this$1.publicPath) + file + "\" defer></script>")
    }).join('')
  } else {
    return ''
  }
};

It failed 'cause for some reason initial is now empty.
So var needed = [initial[0]].concat(async, initial.slice(1)); ended up as [undefined]. I fixed this as shown above. And only after that my build launched fine.

wensiyuanseven · 2020-10-29T03:36:27Z

What problem does this feature solve?

github missing repository vuejs/vue-ssr-webpack-plugin, i update webpack to version 5 and have error
[vue-server-renderer-webpack-plugin] webpack config output.libraryTarget should be "commonjs2".

What does the proposed API look like?

in my output.libraryTarget is libraryTarget: 'commonjs2'

How to solve this problem？

wensiyuanseven · 2020-10-29T03:57:21Z

I am facing the same problem. What I found out is that it seem like in webpack 5 compiler.options.output.libraryTarget was replaced with compiler.options.output.library.type. Not sure if it's always so 'cause I didn't find any information about that in changelog. To pass the validation I had to change validation function of the loader like this:

var validate = function (compiler) {
  if (compiler.options.target !== 'node') {
    warn('webpack config `target` should be "node".');
  }
-  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
+  if (compiler.options.output && compiler.options.output.library.type !== 'commonjs2') {
    warn('webpack config `output.libraryTarget` should be "commonjs2".');
  }

  if (!compiler.options.externals) {
    tip(
      'It is recommended to externalize dependencies in the server build for ' +
      'better build performance.'
    );
  }
};

Also, again, in my case, entry points are now objects with name and size fields. So I had to modify stuff below:

- var entryAssets = entryInfo.assets.filter(isJS);
+ var entryAssets = entryInfo.assets.filter(file => isJS(file.name));

if (entryAssets.length > 1) {
  throw new Error(
    "Server-side bundle should have one single entry file. " +
    "Avoid using CommonsChunkPlugin in the server config."
  )
}

var entry = entryAssets[0];
- if (!entry || typeof entry !== 'string') {
+ if (!entry || typeof entry.name !== 'string') {
  throw new Error(
    ("Entry \"" + entryName + "\" not found. Did you specify the correct entry option?")
  )
}

var bundle = {
+ entry: entry.name,
  files: {},
  maps: {}
};

After these changes my bundle compiled correctly.

thanks

Danail-Irinkov · 2020-10-30T03:25:36Z

Hi guys, facing the same issue. Is an update coming soon?

borodadada · 2020-10-30T10:55:33Z

Danail-Irinkov, this fix work fine. node_modules/vue-server-renderer/ search in files. BUT work only on build mode, my dev mode die. New version webpack-dev-middleware, i don't know how fix.

Danail-Irinkov · 2020-10-31T12:39:45Z

Sure I applied the changes in local, but will have to fork for the main server if thats the solution.
however I am still unable to render my routes....
[ { message: '[prerender-spa-plugin] Unable to prerender all routes!',
details: undefined,
stack:
'Error: [prerender-spa-plugin] Unable to prerender all routes!\n at PrerendererInstance.initialize.th
en.then.then.then.then.then.then.then.catch.err (F:\PROmo\PROmo\promo\node_modules\prerender-spa-plugin
\es6\index.js:147:33)\n at process._tickCallback (internal/process/next_tick.js:68:7)' } ]

I am prerendering just my login and signup pages..., I tried excluding some imported elements, but still cant prerender the login page...

It used to work fine before I updated to webpack5

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../dist'),
  routes: ['/login', '/signup'],
  renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
    renderAfterTime: 5000,
    captureAfterTime: 5000,
    maxConcurrentRoutes: 2,
  }),
  server: {
    port: 5000
  },
  minify: {
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    decodeEntities: true,
    keepClosingSlash: true,
    sortAttributes: true
  },
}),

OskarLebuda · 2020-11-16T14:45:00Z

@yyx990803 will you accept Pull Request if we fix it?

se22as · 2020-11-17T12:59:12Z

I am also running into this issue with the following dependencies

"webpack": "~5.4.0",
"vue": "~2.6.12",
"vue-router": "~3.4.7",
"vue-server-renderer": "~2.6.12",

My webpack server config contains

const config = {
  target: 'node',

  entry: './src/server/main.js',

  output: {
    filename: 'server-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2',
  },
 ...
}

I am getting 2 errors

(1)
[vue-server-renderer-webpack-plugin] webpack config output.libraryTarget should be "commonjs2".

My libraryTarget does have commonjs2.

(2)

5% emitting emit vue-server-pluginC:\MY_APP_FOLDER\node_modules\vue-server-renderer\server-plugin.js:76
      throw new Error(
      ^

Error: Entry "main" not found. Did you specify the correct entry option?
    at C:\MY_APP_FOLDER\node_modules\vue-server-renderer\server-plugin.js:76:13

I do have the main.js file at src/server/main.js as what is specified in the webpack config

efremenkovan · 2020-11-20T12:53:41Z

@se22as checkout this comment.

(1)
[vue-server-renderer-webpack-plugin] webpack config output.libraryTarget should be "commonjs2".

My libraryTarget does have commonjs2.

This problem is resolved by this code adjustment:

-  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
+  if (compiler.options.output && compiler.options.output.library.type !== 'commonjs2') {

(2)
Error: Entry "main" not found. Did you specify the correct entry option?
at C:\MY_APP_FOLDER\node_modules\vue-server-renderer\server-plugin.js:76:13
I do have the main.js file at src/server/main.js as what is specified in the webpack config

This problem is resolved by this code adjustment:

- if (!entry || typeof entry !== 'string') {
+ if (!entry || typeof entry.name !== 'string') {

P.S. You should probably check the comment I linked above to resolve all issues related to this package.

se22as · 2020-11-20T14:58:47Z

@efremenkovan thank you for your reply. Isn't the code change mentioned above involving changing code in node-modules. If that is the case, then as soon as i reinstall (or a colleague installs the deps) this code change has to be done again. If I have understood that correctly then this is not practical for an app i am about to release

efremenkovan · 2020-11-20T17:48:43Z

@se22as yeah, you are right about it being impractical, but there is no other workaround for now. The best thing you can do in case you really want to use webpack 5 in your project - create your own git repo with fixes and use it as plugin placeholder 'till it's updated. But I am not sure if it's worth it. I guess for prod. it's still better to use webpack v4 'cause it's wide support.

danielholmes · 2020-11-23T23:50:55Z

@se22as @efremenkovan https://www.npmjs.com/package/patch-package is very good for this use case

trainiac · 2020-12-04T18:27:31Z

Also, I think it's worth mentioning that even after my build succeeded I couldn't launch my bundle due to this error:

TypeError: Cannot read property 'file' of undefined
    at {{YOUR_PATH_TO_PROJECT}}/node_modules/vue-server-renderer/build.dev.js:9074:24

The problem was in function that starts on line 9056:

TemplateRenderer.prototype.renderScripts = function renderScripts (context) {
  var this$1 = this;

  if (this.clientManifest) {
    var initial = this.preloadFiles.filter(function (ref) {
        var file = ref.file;

        return isJS(file);
      });
    var async = (this.getUsedAsyncFiles(context) || []).filter(function (ref) {
        var file = ref.file;

        return isJS(file);
      });
-   var needed = [initial[0]].concat(async, initial.slice(1));
+   var needed = (initial.length ? [initial[0]] : []).concat(async, initial.slice(1));
    return needed.map(function (ref) {
        var file = ref.file;

      return ("<script src=\"" + (this$1.publicPath) + file + "\" defer></script>")
    }).join('')
  } else {
    return ''
  }
};

It failed 'cause for some reason initial is now empty.
So var needed = [initial[0]].concat(async, initial.slice(1)); ended up as [undefined]. I fixed this as shown above. And only after that my build launched fine.

Instead of fixing build.dev.js this way I think it's better to deal with the source of the problem which is that the initial list is not getting populated which must happen for SSR to work properly. In client-plugin:

    var initialFiles = uniq(Object.keys(stats.entrypoints)
-      .map(function (name) { return stats.entrypoints[name].assets })
+      .map(function (name) { return stats.entrypoints[name].assets.map(asset => asset.name) })
      .reduce(function (assets, all) { return all.concat(assets); }, [])
      .filter(function (file) { return isJS(file) || isCSS(file); }));

Also one other fix I needed to make in client-plugin for production SSR was:

    stats.modules.forEach(function (m) {
      // ignore modules duplicated in multiple chunks
      if (m.chunks.length === 1) {
        var cid = m.chunks[0];
        var chunk = stats.chunks.find(function (c) { return c.id === cid; });
        if (!chunk || !chunk.files) {
          return
        }
-        var id = m.identifier.replace(/\s\w+$/, ''); // remove appended hash
+        var id = m.identifier.replace(/\|\w+$/, ''); // remove appended hash
        var files = manifest.modules[hash(id)] = chunk.files.map(fileToIndex);
        // find all asset modules associated with the same chunk
        assetModules.forEach(function (m) {
          if (m.chunks.some(function (id) { return id === cid; })) {
            files.push.apply(files, m.assets.map(fileToIndex));
          }
        });
      }
    });

It looks like in webpack 5 the hash to a module identifier is appended with a | instead of a space.

lduoduo · 2020-12-09T05:44:45Z

i try to find a way to work well with webpack 4 and 5:
both server-plugin and client-plugin need to be compatible

lzxb · 2020-12-29T04:05:36Z

Error: Cannot find module '../js/290.26881f3c.js'

Has anyone encountered this problem

lzxb · 2020-12-29T05:07:52Z

The server cannot output the js directory

close vuejs#11718

VERY IMPORTANT NOTE: at this commit date, in order to work properly with VueSSRServerPlugin on webpack.ssr.config.js must use WEBPACK VERSION 4, version 5 has an issue on fetching app entry file and output.libraryTarget, more details check vuejs/vue#11718

tibineagu · 2021-03-10T14:47:15Z

Are either #11863 or #11814 going to be merged or are none of them the ideal solution?

Just curious because the changes in #11814 do seem to solve the problem (as @jreyesco16 suggested), yet the PR has been approved and not merged since Dec 10th.

aKzenT · 2021-03-19T10:35:55Z

I'm running into the same problems. Are there plans to fix this so that Vue 2 SRR + Webpack 5 is possible?

lzxb · 2021-03-22T07:56:50Z

Half a year has passed

bobharing · 2021-03-29T17:03:17Z

This is preventing us from upgrading to webpack v5 because we are getting the output library issue. We need It because of a SSR memory leak issue that is caused by webpack v4 minimize.

Will this be fixed soon? As that would possibly be quicker for us than upgrading to Vue v3.

trainiac · 2021-03-29T18:28:24Z

While it isn’t the most ideal solution, Using patch package and all of the fixes here in this issue thread, you can get things to work. I did it and am running webpack 5 with Vue ssr in prod with a big application.

bobharing · 2021-03-30T23:32:03Z

Thanks for the tip! I had no idea such a thing existed, I've been living under a rock

trainiac · 2021-03-30T23:58:24Z

The full set of changes I needed to make everything work.

diff --git a/node_modules/vue-server-renderer/build.dev.js b/node_modules/vue-server-renderer/build.dev.js
index fb4caf5..541941d 100644
--- a/node_modules/vue-server-renderer/build.dev.js
+++ b/node_modules/vue-server-renderer/build.dev.js
@@ -9060,12 +9060,12 @@ TemplateRenderer.prototype.renderScripts = function renderScripts (context) {
     var initial = this.preloadFiles.filter(function (ref) {
         var file = ref.file;
 
-        return isJS(file);
+        return isJS(file) && !file.endsWith('hot-update.js');
       });
     var async = (this.getUsedAsyncFiles(context) || []).filter(function (ref) {
         var file = ref.file;
-
-        return isJS(file);
+        // changed line
+        return isJS(file) && !file.endsWith('hot-update.js');
       });
     var needed = [initial[0]].concat(async, initial.slice(1));
     return needed.map(function (ref) {
diff --git a/node_modules/vue-server-renderer/client-plugin.js b/node_modules/vue-server-renderer/client-plugin.js
index 15cdcbd..7b091cc 100644
--- a/node_modules/vue-server-renderer/client-plugin.js
+++ b/node_modules/vue-server-renderer/client-plugin.js
@@ -45,9 +45,12 @@ VueSSRClientPlugin.prototype.apply = function apply (compiler) {
       .map(function (a) { return a.name; }));
 
     var initialFiles = uniq(Object.keys(stats.entrypoints)
-      .map(function (name) { return stats.entrypoints[name].assets; })
+      // changed line
+      .map(function (name) { return stats.entrypoints[name].assets.map(file => file.name); })
       .reduce(function (assets, all) { return all.concat(assets); }, [])
-      .filter(function (file) { return isJS(file) || isCSS(file); }));
+      .filter(function (file) {
+         return isJS(file) || isCSS(file);
+      }));
 
     var asyncFiles = allFiles
       .filter(function (file) { return isJS(file) || isCSS(file); })
@@ -71,7 +74,9 @@ VueSSRClientPlugin.prototype.apply = function apply (compiler) {
         if (!chunk || !chunk.files) {
           return
         }
-        var id = m.identifier.replace(/\s\w+$/, ''); // remove appended hash
+
+        // changed line
+        var id = m.identifier.replace(/\|\w+$/, ''); // remove appended hash
         var files = manifest.modules[hash(id)] = chunk.files.map(fileToIndex);
         // find all asset modules associated with the same chunk
         assetModules.forEach(function (m) {
diff --git a/node_modules/vue-server-renderer/server-plugin.js b/node_modules/vue-server-renderer/server-plugin.js
index 54ba2b3..121bdc4 100644
--- a/node_modules/vue-server-renderer/server-plugin.js
+++ b/node_modules/vue-server-renderer/server-plugin.js
@@ -17,7 +17,8 @@ var validate = function (compiler) {
     warn('webpack config `target` should be "node".');
   }
 
-  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
+  // changed line
+  if (compiler.options.output && compiler.options.output.library.type !== 'commonjs2') {
     warn('webpack config `output.libraryTarget` should be "commonjs2".');
   }
 
@@ -62,7 +63,8 @@ VueSSRServerPlugin.prototype.apply = function apply (compiler) {
       return cb()
     }
 
-    var entryAssets = entryInfo.assets.filter(isJS);
+    // changed line
+    var entryAssets = entryInfo.assets.filter(file => isJS(file.name));
 
     if (entryAssets.length > 1) {
       throw new Error(
@@ -72,14 +74,16 @@ VueSSRServerPlugin.prototype.apply = function apply (compiler) {
     }
 
     var entry = entryAssets[0];
-    if (!entry || typeof entry !== 'string') {
+    // changed line
+    if (!entry || typeof entry.name !== 'string') {
       throw new Error(
         ("Entry \"" + entryName + "\" not found. Did you specify the correct entry option?")
       )
     }
 
     var bundle = {
-      entry: entry,
+      // changed line
+      entry: entry.name,
       files: {},
       maps: {}
     };

manually make the edits above to the files in your node modules folder
npm install patch-package -D
npx patch-package vue-server-renderer

donezo

Neunerlei · 2021-03-31T18:07:26Z

@trainiac I can confirm, this works 👍 Thanks for sharing.

One oddity, I'd like to add is, that webpack throws a deprecation warning. Luckily it does currently not cause any issues :)

[App - 0 - Server Generator] (node:37104) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)

shresthapradip · 2021-04-05T18:58:29Z

@trainiac: When I try to run server, I get

Error: Invalid server-rendering bundle format. Should be a string or a bundle Object of type:

{
  entry: string;
  files: { [filename: string]: string; };
  maps: { [filename: string]: string; };
}

whereas my generated file has

{
  entry: {name: string};
  files: { [filename: string]: string; };
  maps: { [filename: string]: string; };
}

trainiac · 2021-04-05T19:01:40Z

@trainiac: When I try to run server, I get

Error: Invalid server-rendering bundle format. Should be a string or a bundle Object of type:

{
  entry: string;
  files: { [filename: string]: string; };
  maps: { [filename: string]: string; };
}

whereas my generated file has

{
  entry: {name: string};
  files: { [filename: string]: string; };
  maps: { [filename: string]: string; };
}

Looks like you need the last change I’ve suggested.

shresthapradip · 2021-04-06T16:34:36Z

@trainiac : Yes. That was case. I was trusting message from PhpStorm, when it said patch successfully applied. Ended up using patch-package.

greetfish · 2021-04-13T03:03:19Z

Also, I think it's worth mentioning that even after my build succeeded I couldn't launch my bundle due to this error:

TypeError: Cannot read property 'file' of undefined
    at {{YOUR_PATH_TO_PROJECT}}/node_modules/vue-server-renderer/build.dev.js:9074:24

The problem was in function that starts on line 9056:

TemplateRenderer.prototype.renderScripts = function renderScripts (context) {
  var this$1 = this;

  if (this.clientManifest) {
    var initial = this.preloadFiles.filter(function (ref) {
        var file = ref.file;

        return isJS(file);
      });
    var async = (this.getUsedAsyncFiles(context) || []).filter(function (ref) {
        var file = ref.file;

        return isJS(file);
      });
-   var needed = [initial[0]].concat(async, initial.slice(1));
+   var needed = (initial.length ? [initial[0]] : []).concat(async, initial.slice(1));
    return needed.map(function (ref) {
        var file = ref.file;

      return ("<script src=\"" + (this$1.publicPath) + file + "\" defer></script>")
    }).join('')
  } else {
    return ''
  }
};

It failed 'cause for some reason initial is now empty.
So var needed = [initial[0]].concat(async, initial.slice(1)); ended up as [undefined]. I fixed this as shown above. And only after that my build launched fine.

Thank you brother

greetfish · 2021-04-15T01:24:21Z

i try to find a way to work well with webpack 4 and 5:
both server-plugin and client-plugin need to be compatible

same issue i meeted

ndunks · 2021-04-21T08:18:29Z

The full set of changes I needed to make everything work.

diff --git a/node_modules/vue-server-renderer/build.dev.js b/node_modules/vue-server-renderer/build.dev.js
index fb4caf5..541941d 100644
--- a/node_modules/vue-server-renderer/build.dev.js
+++ b/node_modules/vue-server-renderer/build.dev.js
@@ -9060,12 +9060,12 @@ TemplateRenderer.prototype.renderScripts = function renderScripts (context) {
     var initial = this.preloadFiles.filter(function (ref) {
         var file = ref.file;
 
-        return isJS(file);
+        return isJS(file) && !file.endsWith('hot-update.js');
       });
     var async = (this.getUsedAsyncFiles(context) || []).filter(function (ref) {
         var file = ref.file;
-
-        return isJS(file);
+        // changed line
+        return isJS(file) && !file.endsWith('hot-update.js');
       });
     var needed = [initial[0]].concat(async, initial.slice(1));
     return needed.map(function (ref) {
diff --git a/node_modules/vue-server-renderer/client-plugin.js b/node_modules/vue-server-renderer/client-plugin.js
index 15cdcbd..7b091cc 100644
--- a/node_modules/vue-server-renderer/client-plugin.js
+++ b/node_modules/vue-server-renderer/client-plugin.js
@@ -45,9 +45,12 @@ VueSSRClientPlugin.prototype.apply = function apply (compiler) {
       .map(function (a) { return a.name; }));
 
     var initialFiles = uniq(Object.keys(stats.entrypoints)
-      .map(function (name) { return stats.entrypoints[name].assets; })
+      // changed line
+      .map(function (name) { return stats.entrypoints[name].assets.map(file => file.name); })
       .reduce(function (assets, all) { return all.concat(assets); }, [])
-      .filter(function (file) { return isJS(file) || isCSS(file); }));
+      .filter(function (file) {
+         return isJS(file) || isCSS(file);
+      }));
 
     var asyncFiles = allFiles
       .filter(function (file) { return isJS(file) || isCSS(file); })
@@ -71,7 +74,9 @@ VueSSRClientPlugin.prototype.apply = function apply (compiler) {
         if (!chunk || !chunk.files) {
           return
         }
-        var id = m.identifier.replace(/\s\w+$/, ''); // remove appended hash
+
+        // changed line
+        var id = m.identifier.replace(/\|\w+$/, ''); // remove appended hash
         var files = manifest.modules[hash(id)] = chunk.files.map(fileToIndex);
         // find all asset modules associated with the same chunk
         assetModules.forEach(function (m) {
diff --git a/node_modules/vue-server-renderer/server-plugin.js b/node_modules/vue-server-renderer/server-plugin.js
index 54ba2b3..121bdc4 100644
--- a/node_modules/vue-server-renderer/server-plugin.js
+++ b/node_modules/vue-server-renderer/server-plugin.js
@@ -17,7 +17,8 @@ var validate = function (compiler) {
     warn('webpack config `target` should be "node".');
   }
 
-  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
+  // changed line
+  if (compiler.options.output && compiler.options.output.library.type !== 'commonjs2') {
     warn('webpack config `output.libraryTarget` should be "commonjs2".');
   }
 
@@ -62,7 +63,8 @@ VueSSRServerPlugin.prototype.apply = function apply (compiler) {
       return cb()
     }
 
-    var entryAssets = entryInfo.assets.filter(isJS);
+    // changed line
+    var entryAssets = entryInfo.assets.filter(file => isJS(file.name));
 
     if (entryAssets.length > 1) {
       throw new Error(
@@ -72,14 +74,16 @@ VueSSRServerPlugin.prototype.apply = function apply (compiler) {
     }
 
     var entry = entryAssets[0];
-    if (!entry || typeof entry !== 'string') {
+    // changed line
+    if (!entry || typeof entry.name !== 'string') {
       throw new Error(
         ("Entry \"" + entryName + "\" not found. Did you specify the correct entry option?")
       )
     }
 
     var bundle = {
-      entry: entry,
+      // changed line
+      entry: entry.name,
       files: {},
       maps: {}
     };

manually make the edits above to the files in your node modules folder
npm install patch-package -D
npx patch-package vue-server-renderer

donezo
Thanks, just add the minimal way:
Copy the patch code and save as fix-vue-ssr.patch in your project dir, then run:

cat fix-vue-ssr.patch | git apply -

shipMatserJack · 2021-05-09T14:10:34Z

I am also running into this issue with the following dependencies
"webpack": "~5.4.0",
"vue": "~2.6.12",
"vue-router": "~3.4.7",
"vue-server-renderer": "~2.6.12",
My webpack server config contains
const config = {
  target: 'node',

  entry: './src/server/main.js',

  output: {
    filename: 'server-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2',
  },
 ...
}
I am getting 2 errors

(1)
[vue-server-renderer-webpack-plugin] webpack config output.libraryTarget should be "commonjs2".

My libraryTarget does have commonjs2.

(2)
5% emitting emit vue-server-pluginC:\MY_APP_FOLDER\node_modules\vue-server-renderer\server-plugin.js:76
      throw new Error(
      ^

Error: Entry "main" not found. Did you specify the correct entry option?
    at C:\MY_APP_FOLDER\node_modules\vue-server-renderer\server-plugin.js:76:13
I do have the main.js file at src/server/main.js as what is specified in the webpack config

I encountered the same problem as you, have you solved it

evenstensberg · 2021-05-09T14:12:01Z

If you give me a reproduction repository, I can try to fix it

PierreDallier · 2021-05-10T10:50:19Z

Same issue
it seems that var entryAssets = entryInfo.assets.filter(isJS); (line 65 in server-plugin.js is empty)
if it can help you can find a reproduction here https://github.com/PierreDallier/vue-server-renderer-webpack-plugin_errors

UPDATED: it is fixed with @ndunks very helpful trick
I had made a mistake in my patch-package

cartok · 2021-11-30T15:51:14Z

Why is it closed? Guess the solution is to upgrade to Vue 3 when upgrading to Webpack 5

cjblomqvist · 2021-12-12T07:47:37Z

@cartok because it was fixed in another PR (you can see the reference in this thread)

cartok · 2021-12-12T09:22:17Z

@cjblomqvist thanks, but I still got the issue. Will maybe recheck if I did not mess it up elsewhere.

cjblomqvist · 2021-12-12T17:30:09Z

It works fine for me

borodadada · 2021-12-12T21:00:46Z

all work fine

        "vue-loader": "^15.9.8",
        "vue-server-renderer": "^2.6.14",
        "vuex-router-sync": "^5.0.0",
        "webpack": "^5.53.0",
        "webpack-cli": "^4.8.0",
        "webpack-dev-middleware": "^5.1.0",
        "webpack-hot-middleware": "^2.25.1",
        "webpack-merge": "^5.8.0",
        "webpack-node-externals": "^3.0.0"

any Vue 2 / 3

borodadada changed the title ~~vuejs/vue-ssr-webpack-plugin~~ vuejs/vue-ssr-webpack-plugin and webpack 5 Oct 12, 2020

posva added feat:ssr feature request labels Oct 12, 2020

borodadada mentioned this issue Oct 23, 2020

webpack 5 error vuejs/vue2-ssr-docs#306

Open

lduoduo added a commit to lduoduo/vue that referenced this issue Dec 9, 2020

fix: make ssr-plugin compatible with wp4/5(vuejs#11718)

b641e1b

lduoduo mentioned this issue Dec 9, 2020

fix: make ssr-build-plugin compatible with webpack4/5 (fix #11718) #11814

Open

13 tasks

lduoduo added a commit to lduoduo/vue that referenced this issue Dec 9, 2020

fix: make ssr-build-plugin compatible with webpack4/5 (fix vuejs#11718)

7b1e90a

janeLLLL mentioned this issue Jan 6, 2021

vuejs/vue-ssr-webpack-plugin and webpack 5 janeLLLL/blog#47

Open

ygj6 added a commit to ygj6/vue that referenced this issue Jan 12, 2021

fix(ssr): vue-ssr-webpack-plugin compatible with webpack 4/5

8468aeb

close vuejs#11718

ygj6 mentioned this issue Jan 12, 2021

fix(ssr): vue-ssr-webpack-plugin compatible with webpack 4/5 #11863

Closed

13 tasks

posva mentioned this issue Apr 7, 2021

feat(ssr): vue-ssr-webpack-plugin compatible with webpack 5 #12002

Merged

13 tasks

posva mentioned this issue May 4, 2021

webpack v5 and vue 3.0.11 #12050

Closed

This comment has been minimized.

Sign in to view

KaelWD mentioned this issue May 11, 2021

chore: update docs to webpack 5 vuetifyjs/vuetify#13635

Merged

4 tasks

brophdawg11 mentioned this issue Jun 1, 2021

Initial updates for webpack 5 support brophdawg11/vue-ssr-build#101

Merged

posva closed this as completed in #12002 Jun 2, 2021

lzxb mentioned this issue Jul 7, 2022

Webpack hot reload error dp-os/gez#71

Closed

vuejs/vue-ssr-webpack-plugin and webpack 5 #11718

vuejs/vue-ssr-webpack-plugin and webpack 5 #11718

Comments

borodadada commented Oct 12, 2020

What problem does this feature solve?

What does the proposed API look like?

darkangel081195 commented Oct 18, 2020

borodadada commented Oct 18, 2020

efremenkovan commented Oct 28, 2020

efremenkovan commented Oct 28, 2020

wensiyuanseven commented Oct 29, 2020

What problem does this feature solve?

What does the proposed API look like?

wensiyuanseven commented Oct 29, 2020

Danail-Irinkov commented Oct 30, 2020

borodadada commented Oct 30, 2020

Danail-Irinkov commented Oct 31, 2020 • edited Loading

OskarLebuda commented Nov 16, 2020

se22as commented Nov 17, 2020

efremenkovan commented Nov 20, 2020

se22as commented Nov 20, 2020

efremenkovan commented Nov 20, 2020

danielholmes commented Nov 23, 2020

trainiac commented Dec 4, 2020

lduoduo commented Dec 9, 2020 • edited Loading

lzxb commented Dec 29, 2020

lzxb commented Dec 29, 2020

tibineagu commented Mar 10, 2021 • edited Loading

aKzenT commented Mar 19, 2021

lzxb commented Mar 22, 2021

bobharing commented Mar 29, 2021 • edited Loading

trainiac commented Mar 29, 2021 • edited Loading

bobharing commented Mar 30, 2021

trainiac commented Mar 30, 2021 • edited Loading

Neunerlei commented Mar 31, 2021

shresthapradip commented Apr 5, 2021 • edited Loading

trainiac commented Apr 5, 2021

shresthapradip commented Apr 6, 2021

greetfish commented Apr 13, 2021

greetfish commented Apr 15, 2021

ndunks commented Apr 21, 2021

This comment has been minimized.

This comment has been minimized.

shipMatserJack commented May 9, 2021

evenstensberg commented May 9, 2021

PierreDallier commented May 10, 2021 • edited Loading

cartok commented Nov 30, 2021 • edited Loading

cjblomqvist commented Dec 12, 2021

cartok commented Dec 12, 2021

cjblomqvist commented Dec 12, 2021

borodadada commented Dec 12, 2021 • edited Loading

Danail-Irinkov commented Oct 31, 2020 •

edited

Loading

lduoduo commented Dec 9, 2020 •

edited

Loading

tibineagu commented Mar 10, 2021 •

edited

Loading

bobharing commented Mar 29, 2021 •

edited

Loading

trainiac commented Mar 29, 2021 •

edited

Loading

trainiac commented Mar 30, 2021 •

edited

Loading

shresthapradip commented Apr 5, 2021 •

edited

Loading

PierreDallier commented May 10, 2021 •

edited

Loading

cartok commented Nov 30, 2021 •

edited

Loading

borodadada commented Dec 12, 2021 •

edited

Loading