Prerendering failed because of error: ReferenceError: window is not defined

[JSGund]

I have installed the library: npm install react-wavy-audio and this library needs window to be defined, Once I ran the application and getting the below exception in the browser.

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined at eval (webpack-internal:///./node_modules/react-wavy-audio/dist/index.js:40:4) at createCommonjsModule (webpack-internal:///./node_modules/react-wavy-audio/dist/index.js:29:35) at eval (webpack-internal:///./node_modules/react-wavy-audio/dist/index.js:32:18) at Object../node_modules/react-wavy-audio/dist/index.js

@NickMaev @XuHaoJun can you please help me out to resolve this exception?

[NickMaev]

You should add an alias of "react-wavy-audio" and make it false in webpack config of the server's section:

webpack.config.js

    //...

    // Configuration for server-side (prerendering) bundle suitable for running in Node.
    const serverBundleConfig = merge(sharedConfig(), {
        module: {
            rules: [
                { test: /\.(scss|sass)$/, use: "ignore-loader" }
            ]
        },
        resolve: { 
            mainFields: ['main'],
            alias: { 
                'myLibThatNeedsWindow': false // Add this alias to the serverBundleConfig
            }
        },
        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'
    });

    //...

Then wrap any callings of that library into condition if(!IsNode()){...}:

MyAwesomeComponent.js

import { isNode } from '@Utils';
import myLibThatNeedsWindow from "myLibThatNeedsWindow";

if(!isNode()) {
    // Will be ignored by prerendering.
    myLibThatNeedsWindow();
}

[JSGund]

Added in webpack.config.js: alias: { "@react-wavy-audio": false }

Throwing the below exception once made the changes as you suggested:

**Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration[1].resolve.alias['react-wavy-audio'] should be a string. -> New request**

[NickMaev]

Added in webpack.config.js: alias: { "@react-wavy-audio": false }

Throwing the below exception once made the changes as you suggested:

**Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration[1].resolve.alias['react-wavy-audio'] should be a string. -> New request**

1. Don't use '@' symbol. Just type the library name.
2. Try to type "node-noop" instead of true

[JSGund]

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of XYZ. at invariant (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:56:15) at createFiberFromTypeAndProps (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:10218:11) at createFiberFromElement (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:10239:15) at reconcileSingleElement (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:12532:23) at reconcileChildFibers (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:12589:35) at reconcileChildren (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:14403:28) at updateHostComponent (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:14864:3) at beginWork (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:15650:14) at performUnitOfWork (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:19313:12) at workLoop (webpack-internal:///./node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:19353:24)