Error asp.net core prerender webpack: TypeError: Unable to read property 'filter'

Question

I have an error when I try to use prerender: asp-prerender-webpack-config="webpack.config.js" for my application.

 <app asp-prerender-module="ClientApp/dist/main-server" asp-prerender-webpack-config="webpack.config.js">Loading...</app> 

Error:

An unhandled error occurred while processing the request.

Exception: the call to the Node module failed: TypeError: Can not read the undefined property filter in D: \ Projects \ aspnetocore-angular2 \ node_modules \ ASP-WebPack \ LoadViaWebpack.js: 80: 54 during initializationPromise (D: \ Projects \ aspnetocore- angular2 \ node_modules \ ASP-WebPack \ node_modules \ ES6-promise \ DIST \ ES6-promise.js: 459: 5) on the new promise (D: \ Projects \ aspnetocore- angular2 \ node_modules \ ASP-WebPack \ node_modules \ ES6-promise \ distance \ ES6-promise.js: 871: 31) when loading ViaWebpackNoCache (D: \ Projects \ aspnetocore-angular2 \ node_modules \ ASP-WebPack \ LoadViaWebpack.js: 34: 12) in Object.loadViaWebpack (D: \ Projects \ aspnetocore - angular2 \ node_modules \ ASP-WebPack \ LoadViaWebpack.js: 19: 49) in findBootModule (D: \ Projects \ aspnetocore- angular2 \ node_modules \ ASP- \ Prerendering.js preliminary rendering: 95: 29) in f indBootFunc (D: \ Projects \ aspnetocore- angular2 \ node_modules \ ASP- \ Prerendering.js pre-rendering: 103: 5) in renderToString (D: \ Projects \ aspnetocore- angular2 \ node_modules \ ASP- \ Prerendering.js pre-rendering: 10 : 5) on module.exports.renderToString

webpack file:

  var isDevBuild = process.argv.indexOf('--env.prod') < 0; var path = require('path'); var webpack = require('webpack'); var nodeExternals = require('webpack-node-externals'); var merge = require('webpack-merge'); var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/; // Configuration in common to both client-side and server-side bundles var sharedConfig = { resolve: { extensions: [ '', '.js', '.ts' ] }, output: { filename: '[name].js', publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { loaders: [ { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, { test: /\.html$/, loader: 'raw' }, { test: /\.css$/, loader: 'to-string!css' }, { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } ] } }; // Configuration for client-side bundle suitable for running in browsers var clientBundleConfig = merge(sharedConfig, { entry: { 'main-client': './ClientApp/boot-client.ts' }, output: { path: path.join(__dirname, './wwwroot/dist') }, devtool: isDevBuild ? 'inline-source-map' : null, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ]) }); // Configuration for server-side (prerendering) bundle suitable for running in Node var serverBundleConfig = merge(sharedConfig, { entry: { 'main-server': './ClientApp/boot-server.ts' }, output: { libraryTarget: 'commonjs', path: path.join(__dirname, './ClientApp/dist') }, target: 'node', devtool: 'inline-source-map', externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules }); module.exports = [clientBundleConfig, serverBundleConfig]; 

Answer 1

I have had the same problem for a long time and I suspect this is a mistake. I have a workaround, remove the asp-prerender-webpack-config attribute from the tag, and configure webpack to output the file with the extension to another file with the same name. Make sure you add libraryTarget: 'commonjs2' to the webpack configuration file to make it work, since you need to export the load function as follows: module.exports . By default, webpack does not export anything, you must specify this yourself. Below are the codes needed to work, as this works for me:

clients.jsx

 var React = require("react"); var ReactDOMServer = require("react-dom/server"); var Test = React.createClass({ render: function(){ return (<h1>Hello!</h1>); } }); module.exports = function (params) { return new Promise((resolve, reject) => { resolve({ html: ReactDOMServer.renderToString(<Test />) }); }); } 

webpack.config.js

 /// <binding ProjectOpened='Watch - Development' /> var webpack = require('webpack'); var path = require('path'); var MODULES = path.resolve(__dirname, "wwwroot/modules"); module.exports = { resolve: { extensions: ['', '.js', '.jsx'], modulesDirectories: ['node_modules'] }, entry: { clients: MODULES + "/clients.jsx" }, output: { path: MODULES, filename: "[name].js", libraryTarget: 'commonjs2' }, module: { loaders: [ { test: /\.jsx?/, include: MODULES, loader: 'babel-loader' } ] }, plugins: [], target: "node" }; 

Index.cshtml

 <div id="clients" asp-prerender-module="wwwroot/modules/clients" asp-prerender-data="@Model" ></div> 

.babelrc

 { "presets": [ "es2015", "react" ] } 

packages.json

  "devDependencies": { "aspnet-prerendering": "^1.0.7", "aspnet-webpack": "^1.0.17", "aspnet-webpack-react": "^1.0.2", "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-plugin-add-module-exports": "^0.2.1", "babel-preset-es2015": "^6.16.0", "babel-preset-react": "^6.16.0", "react": "^15.3.2", "react-dom": "^15.3.2", "webpack": "^1.13.2" }, "scripts": { "dev": "webpack -d --watch", "build": "webpack -p" } 

Thus, the reaction components will be located in: ./wwwroot/modules and inside this folder will be both clients.jsx and clients.js .