Issue with creating server render app file and exporting createServerRenderer function #1086

New Issue

fergalmoran · 2025-08-09T17:18:49Z

fergalmoran commented

2025-08-09 17:18:49 +00:00

Originally created by @peterlazzarino on 1/26/2017

Hey, I am trying to get server rendering set up on my existing react web app and ran into an issue I'm not sure how to get around. I set up my server js file very similarly to the boot-server here https://github.com/aspnet/JavaScriptServices/tree/dev/templates/ReactReduxSpa/ClientApp

I'll paste code below. When I run this with a div that it should render in ->

I get the following message. The module at ./wwwroot/app-server does not export a default function, and you have not specified which export to invoke. I know it sees the file since it has given me other errors for references inside the file but I need some help to see if this is a bug or something on my end.

import { Provider } from 'react-redux';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import { createServerRenderer } from 'aspnet-prerendering';
import { store } from './store';
import routes from './routes'

export default createServerRenderer(params => {
    return new Promise((resolve, reject) => {
        // Match the incoming request against the list of client-side routes
        match({ routes, location: params.location }, (error, redirectLocation, renderProps: any) => {
            if (error) {
                throw error;
            }

            // If there's a redirection, just send this information back to the host application
            if (redirectLocation) {
                resolve({ redirectUrl: redirectLocation.pathname });
                return;
            }

            // If it didn't match any route, renderProps will be undefined
            if (!renderProps) {
                throw new Error(`The location '${ params.url }' doesn't match any route configured in react-router.`);
            }

            // Build an instance of the application
            const app = ( 
                <Provider store={store}>     
                    <RouterContext {...renderProps} />
                </Provider>
            );

            // Perform an initial render that will cause any async tasks (e.g., data access) to begin
            renderToString(app);

            // Once the tasks are done, we can perform the final render
            // We also send the redux store state, so the client can continue execution where the server left off
            params.domainTasks.then(() => {
                resolve({
                    html: renderToString(app),
                    globals: { initialReduxState: store.getState() }
                });
            }, reject); // Also propagate any errors back into the host application
        });
    });
});





 `

*Originally created by @peterlazzarino on 1/26/2017* Hey, I am trying to get server rendering set up on my existing react web app and ran into an issue I'm not sure how to get around. I set up my server js file very similarly to the boot-server here https://github.com/aspnet/JavaScriptServices/tree/dev/templates/ReactReduxSpa/ClientApp I'll paste code below. When I run this with a div that it should render in -> <div id="react-app" asp-prerender-module="./wwwroot/app-server"></div> I get the following message. **The module at ./wwwroot/app-server does not export a default function, and you have not specified which export to invoke.** I know it sees the file since it has given me other errors for references inside the file but I need some help to see if this is a bug or something on my end. ```import * as React from 'react'; import { Provider } from 'react-redux'; import { renderToString } from 'react-dom/server'; import { match, RouterContext } from 'react-router'; import { createServerRenderer } from 'aspnet-prerendering'; import { store } from './store'; import routes from './routes' export default createServerRenderer(params => { return new Promise((resolve, reject) => { // Match the incoming request against the list of client-side routes match({ routes, location: params.location }, (error, redirectLocation, renderProps: any) => { if (error) { throw error; } // If there's a redirection, just send this information back to the host application if (redirectLocation) { resolve({ redirectUrl: redirectLocation.pathname }); return; } // If it didn't match any route, renderProps will be undefined if (!renderProps) { throw new Error(`The location '${ params.url }' doesn't match any route configured in react-router.`); } // Build an instance of the application const app = ( <Provider store={store}> <RouterContext {...renderProps} /> </Provider> ); // Perform an initial render that will cause any async tasks (e.g., data access) to begin renderToString(app); // Once the tasks are done, we can perform the final render // We also send the redux store state, so the client can continue execution where the server left off params.domainTasks.then(() => { resolve({ html: renderToString(app), globals: { initialReduxState: store.getState() } }); }, reject); // Also propagate any errors back into the host application }); }); }); `

fergalmoran closed this issue

2025-08-09 17:18:49 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1086