Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
borodadada opened this issue Oct 12, 2020 · 46 comments · Fixed by #12002
Closed

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

borodadada opened this issue Oct 12, 2020 · 46 comments · Fixed by #12002

Comments

@borodadada
Copy link

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'

@borodadada borodadada changed the title vuejs/vue-ssr-webpack-plugin vuejs/vue-ssr-webpack-plugin and webpack 5 Oct 12, 2020
@darkangel081195
Copy link

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
Copy link
Author

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

@efremenkovan
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@borodadada
Copy link
Author

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
Copy link

Danail-Irinkov commented Oct 31, 2020

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
Copy link

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

@se22as
Copy link

se22as commented Nov 17, 2020

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
Copy link

@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
Copy link

se22as commented Nov 20, 2020

@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
Copy link

@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
Copy link

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

@trainiac
Copy link

trainiac commented Dec 4, 2020

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
Copy link

lduoduo commented Dec 9, 2020

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

image
image

@lzxb
Copy link
Contributor

lzxb commented Dec 29, 2020

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

Has anyone encountered this problem

@lzxb
Copy link
Contributor

lzxb commented Dec 29, 2020

image

The server cannot output the js directory

ygj6 added a commit to ygj6/vue that referenced this issue Jan 12, 2021
carloscorti added a commit to carloscorti/vue-ssr that referenced this issue Jan 26, 2021
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
Copy link

tibineagu commented Mar 10, 2021

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
Copy link

aKzenT commented Mar 19, 2021

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

@lzxb
Copy link
Contributor

lzxb commented Mar 22, 2021

Half a year has passed

@bobharing
Copy link

bobharing commented Mar 29, 2021

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
Copy link

trainiac commented Mar 29, 2021

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
Copy link

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

@trainiac
Copy link

trainiac commented Mar 30, 2021

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
Copy link

@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
Copy link

shresthapradip commented Apr 5, 2021

@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
Copy link

trainiac commented Apr 5, 2021

@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
Copy link

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

@greetfish
Copy link

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
Copy link

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

image
image

same issue i meeted

@ndunks
Copy link

ndunks commented Apr 21, 2021

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 - 

@evenstensberg

This comment has been minimized.

@evenstensberg

This comment has been minimized.

@shipMatserJack
Copy link

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
Copy link

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

@PierreDallier
Copy link

PierreDallier commented May 10, 2021

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
Copy link

cartok commented Nov 30, 2021

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

@cjblomqvist
Copy link

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

@cartok
Copy link

cartok commented Dec 12, 2021

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

@cjblomqvist
Copy link

It works fine for me

@borodadada
Copy link
Author

borodadada commented Dec 12, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet