[Bug] ReferenceError: window is not defined in components\Wizard\Wizard.js

kasterbrandon commented 3 years ago

Version

1.1.0

Reproduction link

Occurs in version 1.1.0 without modification

Operating System

Windows 10 Pro & Mac OS

Device

PC & Mac

Browser & Version

Chrome & Safari

Steps to reproduce

Download version 1.1.0 of the NextJS Material Dashboard Pro
run 'npm install'
run 'npm run dev'
In your browser, navigate to 'http://localhost:3000/admin/dashboard'
In your browser, navigate to the Wizard menu item on the left navigation bar
Refresh the page in the browser by pressing F5
Error occurs stating 'ReferenceError: window is not defined'.
What is expected?

Refreshing the wizard page should display the wizard page

What is actually happening?

A reference error is occurring as 'window' is not defined in the context

Solution

Additional comments

einazare commented 3 years ago

Hello there, @kasterbrandon ,

Please go inside pages/admin/wizard.js and replace everything with:

import React from "react";

// layout for this page
import Admin from "layouts/Admin.js";
// core components
import Wizard from "components/Wizard/Wizard.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import Step1 from "components/WizardSteps/Step1.js";
import Step2 from "components/WizardSteps/Step2.js";
import Step3 from "components/WizardSteps/Step3.js";

function WizardView() {
  return (
    <GridContainer justify="center">
      <GridItem xs={12} sm={8}>
        {typeof window != "undefined" ? (
          <Wizard
            validate
            steps={[
              { stepName: "About", stepComponent: Step1, stepId: "about" },
              { stepName: "Account", stepComponent: Step2, stepId: "account" },
              { stepName: "Address", stepComponent: Step3, stepId: "address" },
            ]}
            title="Build Your Profile"
            subtitle="This information will let us know more about you."
            finishButtonClick={(e) => console.log(e)}
          />
        ) : null}
      </GridItem>
    </GridContainer>
  );
}

WizardView.layout = Admin;

export default WizardView;

This will solve the issue.

Also, please leave the issue open.

Best, Manu

kasterbrandon commented 3 years ago

Thank you for the response Manu. I have confirmed the code you provided has resolved the issue. I will leave the issue I submitted open.

On Wed, Mar 17, 2021 at 2:22 AM Nazare Emanuel-Ioan < @.***> wrote:

Hello there, @kasterbrandon https://github.com/kasterbrandon ,

Please go inside pages/admin/wizard.js and replace everything with:

import React from "react";

// layout for this page import Admin from "layouts/Admin.js"; // core components import Wizard from "components/Wizard/Wizard.js"; import GridContainer from "components/Grid/GridContainer.js"; import GridItem from "components/Grid/GridItem.js";

import Step1 from "components/WizardSteps/Step1.js"; import Step2 from "components/WizardSteps/Step2.js"; import Step3 from "components/WizardSteps/Step3.js";

function WizardView() { return (
{typeof window != "undefined" ? ( console.log(e)} /> ) : null}
); }

WizardView.layout = Admin;

export default WizardView;

This will solve the issue.

Also, please leave the issue open.

Best, Manu

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-nextjs-material-dashboard-pro/issues/10#issuecomment-800891633, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS4DT2F5MS35CRGC5G4AYQ3TEBRELANCNFSM4ZJ4YIRA .

sajadevo commented 2 years ago

Hi there

We've updated the product to v2 and now it has a totally new and fresh design with a reusable, flexible and scalable base structure and all of the issues are fixed on the new update of the product.

Note: To get the latest updates and supports for the products and other related things to Creative Tim please join our Discord Community.

All the best, Sajad  React Developer @ Creative-Tim.com

creativetimofficial / ct-nextjs-material-dashboard-pro