.net core react #112

New Issue

fergalmoran · 2025-08-09T17:15:03Z

fergalmoran commented

2025-08-09 17:15:03 +00:00

Originally created by @skxiaoniao on 3/28/2018

NodeInvocationException: Prerendering failed because of error: Error: The module at ClientApp/dist/main-server does not export a default function, and you have not specified which export to invoke.
at findRenderToStringFunc (C:\Users\SKCC\AppData\Local\Temp\4nzmodph.53o:140:20)
at renderToStringImpl (C:\Users\SKCC\AppData\Local\Temp\4nzmodph.53o:75:51)
at C:\Users\SKCC\AppData\Local\Temp\2dhtujng.sg4:114:19
at IncomingMessage. (C:\Users\SKCC\AppData\Local\Temp\2dhtujng.sg4:133:38)
at IncomingMessage.emit (events.js:160:13)
at endReadableNT (_stream_readable.js:1101:12)
at process._tickCallback (internal/process/next_tick.js:152:19)

then this is my webpack config
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');

module.exports = (env) => {
const isDevBuild = !(env && env.prod);

// Configuration in common to both client-side and server-side bundles
const sharedConfig = () => ({
    stats: { modules: false },
    resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    output: {
        filename: '[name].js',
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        rules: [
            {
                test: /\.(tsx|ts)?$/, include: /ClientApp/, use: [
                    {
                        loader:
                        "bundle-loader"
                    }, {
                        loader:
                        "awesome-typescript-loader?silent=true"
                    }
                ],
                exclude: /node_modules/
            },
            { test: /\.(tsx|ts)/, include: /ClientApp/ ,loader: "bundle-loader?lazy!ts-loader" },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=8192&name=images/[name].[ext]' },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
        ]
    },
    plugins: [new CheckerPlugin()]
});

const sharedServerConfig = () => ({
    stats: { modules: false },
    resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    output: {
        filename: '[name].js',
        publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        rules: [
            { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true', exclude: /node_modules/ },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
        ]
    },
    plugins: [new CheckerPlugin()]
});

// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
    entry: { 'main-client': './ClientApp/boot-client.tsx' },
    module: {
        rules: [
            {
                test: /\.css$/, use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ] }
        ]
    },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "site.css"
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        // Plugins that apply in development builds only
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map', // Remove this line if you prefer inline source maps
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
        })
    ] : [
        // Plugins that apply in production builds only
        new webpack.optimize.UglifyJsPlugin()
    ])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedServerConfig(), {
    resolve: { mainFields: ['main'] },
    entry: { 'main-server': './ClientApp/boot-server.tsx' },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./ClientApp/dist/vendor-manifest.json'),
            sourceType: 'commonjs2',
            name: './vendor'
        })
    ],
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map'
});

return [clientBundleConfig, serverBundleConfig];

};

*Originally created by @skxiaoniao on 3/28/2018* NodeInvocationException: Prerendering failed because of error: Error: The module at ClientApp/dist/main-server does not export a default function, and you have not specified which export to invoke. at findRenderToStringFunc (C:\Users\SKCC\AppData\Local\Temp\4nzmodph.53o:140:20) at renderToStringImpl (C:\Users\SKCC\AppData\Local\Temp\4nzmodph.53o:75:51) at C:\Users\SKCC\AppData\Local\Temp\2dhtujng.sg4:114:19 at IncomingMessage.<anonymous> (C:\Users\SKCC\AppData\Local\Temp\2dhtujng.sg4:133:38) at IncomingMessage.emit (events.js:160:13) at endReadableNT (_stream_readable.js:1101:12) at process._tickCallback (internal/process/next_tick.js:152:19) - then this is my webpack config const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; const merge = require('webpack-merge'); module.exports = (env) => { const isDevBuild = !(env && env.prod); // Configuration in common to both client-side and server-side bundles const sharedConfig = () => ({ stats: { modules: false }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, output: { filename: '[name].js', chunkFilename: '[name]-[chunkhash].js', publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { rules: [ { test: /\.(tsx|ts)?$/, include: /ClientApp/, use: [ { loader: "bundle-loader" }, { loader: "awesome-typescript-loader?silent=true" } ], exclude: /node_modules/ }, { test: /\.(tsx|ts)/, include: /ClientApp/ ,loader: "bundle-loader?lazy!ts-loader" }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=8192&name=images/[name].[ext]' }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } ] }, plugins: [new CheckerPlugin()] }); const sharedServerConfig = () => ({ stats: { modules: false }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, output: { filename: '[name].js', publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix }, module: { rules: [ { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true', exclude: /node_modules/ }, { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } ] }, plugins: [new CheckerPlugin()] }); // Configuration for client-side bundle suitable for running in browsers const clientBundleOutputDir = './wwwroot/dist'; const clientBundleConfig = merge(sharedConfig(), { entry: { 'main-client': './ClientApp/boot-client.tsx' }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ] } ] }, output: { path: path.join(__dirname, clientBundleOutputDir) }, plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "site.css" }), new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new webpack.optimize.UglifyJsPlugin() ]) }); // Configuration for server-side (prerendering) bundle suitable for running in Node const serverBundleConfig = merge(sharedServerConfig(), { resolve: { mainFields: ['main'] }, entry: { 'main-server': './ClientApp/boot-server.tsx' }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./ClientApp/dist/vendor-manifest.json'), sourceType: 'commonjs2', name: './vendor' }) ], output: { libraryTarget: 'commonjs', path: path.join(__dirname, './ClientApp/dist') }, target: 'node', devtool: 'inline-source-map' }); return [clientBundleConfig, serverBundleConfig]; };

fergalmoran closed this issue

2025-08-09 17:15:03 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#112