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

Question

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

borodadada opened this issue 4 years ago · 46 comments

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'

Answer 1 · 2020-10-18T16:04:55.000Z

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".

Answer 2 · 2020-10-18T17:14:18.000Z

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

Answer 3 · 2020-10-28T08:44:24.000Z

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.

Answer 4 · 2020-10-28T09:18:37.000Z

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.

Answer 5 · 2020-10-29T03:36:27.000Z

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？

Answer 6 · 2020-10-29T03:57:21.000Z

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

Answer 7 · 2020-10-30T03:25:36.000Z

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

Answer 8 · 2020-10-30T10:55:33.000Z

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.

Answer 9 · 2020-10-31T12:39:45.000Z

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
  },
}),

Answer 10 · 2020-11-16T14:45:00.000Z

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

Answer 11 · 2020-11-17T12:59:12.000Z

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

Answer 12 · 2020-11-20T12:53:41.000Z

@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.

Answer 13 · 2020-11-20T14:58:47.000Z

@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

Answer 14 · 2020-11-20T17:48:43.000Z

@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.

Answer 15 · 2020-11-23T23:50:55.000Z

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

Answer 16 · 2020-12-04T18:27:31.000Z

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.

Answer 17 · 2020-12-09T05:44:45.000Z

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

Answer 18 · 2020-12-29T04:05:36.000Z

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

Has anyone encountered this problem

Answer 19 · 2020-12-29T05:07:52.000Z

The server cannot output the js directory

Answer 20 · 2021-03-04T01:12:27.000Z

How is this not fixed yet? Vue SSR with Webpack 5 isn't possible without this fix, then?

Answer 21 · 2021-03-04T17:25:02.000Z

@Nettsentrisk correct (for Vue 2.x anyway).

Answer 22 · 2021-03-06T02:40:56.000Z

How is this not fixed yet? Vue SSR with Webpack 5 isn't possible without this fix, then?

@Nettsentrisk You have to change the code mentioned above in the "vue-ssr-webpack-plugin" folder within the /node_modules/ it will either be in either the util.js or validate.js file. Just do some debugging and your should be able to figure it out. Best of luck!

Answer 23 · 2021-03-10T14:47:15.000Z

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.

Answer 24 · 2021-03-19T10:35:55.000Z

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

Answer 25 · 2021-03-22T07:56:50.000Z

Half a year has passed

Answer 26 · 2021-03-29T17:03:17.000Z

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.

Answer 27 · 2021-03-29T18:28:24.000Z

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.

Answer 28 · 2021-03-30T23:32:03.000Z

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

Answer 29 · 2021-03-30T23:58:24.000Z

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

Answer 30 · 2021-03-31T18:07:26.000Z

@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)

Answer 31 · 2021-04-05T18:58:29.000Z

@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; };
}

Answer 32 · 2021-04-05T19:01:40.000Z

@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.

Answer 33 · 2021-04-06T16:34:36.000Z

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

Answer 34 · 2021-04-13T03:03:19.000Z

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

Answer 35 · 2021-04-15T01:24:21.000Z

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

Answer 36 · 2021-04-21T08:18:29.000Z

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 -

Answer 37 · 2021-05-04T21:28:10.000Z

Hey everyone! I'd love to work with you to get vue 3.x work with webpack 5 from scratch. Reproduction is available at #12050 . Is there a problem with webpack you need help with, or is this on the vue side of things? Cheers!

Even

Answer 38 · 2021-05-04T21:32:51.000Z

Any leads on where this code needs change would be great, I can happily send a PR

Answer 39 · 2021-05-09T14:10:34.000Z

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

Answer 40 · 2021-05-09T14:12:01.000Z

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

Answer 41 · 2021-05-10T10:50:19.000Z

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

Answer 42 · 2021-11-30T15:51:14.000Z

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

Answer 43 · 2021-12-12T07:47:37.000Z

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

Answer 44 · 2021-12-12T09:22:17.000Z

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

Answer 45 · 2021-12-12T17:30:09.000Z

It works fine for me

Answer 46 · 2021-12-12T21:00:46.000Z

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