asp.net core prerender webpack 错误：TypeError：无法读取属性“过滤器”

Posted 2023-03-27

【中文标题】asp.net core prerender webpack 错误：TypeError：无法读取属性“过滤器”

【英文标题】：asp.net core prerender webpack error: TypeError: Cannot read property 'filter'

【发布时间】：2017-02-10 02:47:52

【问题描述】：

我在尝试预渲染时出错：asp-prerender-webpack-config="webpack.config.js" 到我的应用程序。

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

错误：

处理请求时发生未处理的异常。

异常：调用节点模块失败并出现错误：TypeError：不能 读取未定义的属性“过滤器” D:\projects\aspnetocore-angular2\node_modules\aspnet-webpack\LoadViaWebpack.js:80:54 在初始化承诺 (D:\projects\aspnetocore-angular2\node_modules\aspnet-webpack\node_modules\es6-promise\dist\es6-promise.js:459:5) 在新的承诺 (D:\projects\aspnetocore-angular2\node_modules\aspnet-webpack\node_modules\es6-promise\dist\es6-promise.js:871:31) 在 loadViaWebpackNoCache (D:\projects\aspnetocore-angular2\node_modules\aspnet-webpack\LoadViaWebpack.js:34:12) 在 Object.loadViaWebpack (D:\projects\aspnetocore-angular2\node_modules\aspnet-webpack\LoadViaWebpack.js:19:49) 在 findBootModule (D:\projects\aspnetocore-angular2\node_modules\aspnet-prerendering\Prerendering.js:95:29) 在 findBootFunc (D:\projects\aspnetocore-angular2\node_modules\aspnet-prerendering\Prerendering.js:103:5) 在 renderToString (D:\projects\aspnetocore-angular2\node_modules\aspnet-prerendering\Prerendering.js:10:5) 在 module.exports.renderToString

webpack 文件：

    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];

【问题讨论】：

你在这方面有什么收获吗？我有点厌倦了神秘的 Angular2/webpack 错误！！

使用 app.Use 显示您的启动...

【参考方案1】：

我有同样的问题很长一段时间，我怀疑这是一个错误。我有一个解决方法，从标签中删除 asp-prerender-webpack-config 属性并配置 webpack 以将转译文件输出到另一个同名文件。确保将 libraryTarget: 'commonjs2' 添加到 webpack 配置文件以使其工作，因为它需要您以这种方式导出引导功能：module.exports。默认情况下，webpack 不导出任何内容，您必须自己指定。下面是使它对我有用所需的coden-ps：

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"
  

因此，react 组件将驻留在：./wwwroot/modules 中，并且该文件夹内将同时驻留 clients.jsx 和 clients.js。