Hi, I'm going to pay for NextJS Material Kit Pro, and I'm interested in Typescript source code, but I didn't see it in the Product description. Do this product support Typescript code ?

STEPS TO REPRODUCE

This issue is evident on the live demo site:
https://demos.creative-tim.com/nextjs-material-kit-pro/presentation
...and also if you do a new clean install locally.

1. Open the main page on desktop (tested with Safari, Chrome)
2. Reduce the width of the browser, to, say 900 px - so not full width, but before the header links are collapsed into the mobile menu
3. open one of the dropdown menus on the header, e.g. COMPONENTS

ISSUE

When the menu opens, the tooltip box pushes down the entire header, so that everything becomes out of line.

EXPECTED BEHAVIOUR

The dropdown should appear over the main body of the page, so that the header does not change size.
This is the behaviour in the bootstrap version of the demo site:

https://demos.creative-tim.com/material-kit-pro/presentation.html

Tried to use pattern to validate password input, which is from a inherit of a CustomInput, but the pattern does no work, please help

Code snippet:
**<CustomInput
id="pass"
labelText="Your password"

                  formControlProps={{
                    fullWidth: true,
                  }}
                  inputProps={{
                    onChange: (event) => handleChange(event),
                    placeholder: "Password",
                    type: "password",
                    startAdornment: (
                      <InputAdornment position="start">
                        <Icon className={classes.inputIconsColor}>
                          lock_utline
                        </Icon>
                      </InputAdornment>
                    ),
                    autoComplete: "off",
                    required: true,
                    pattern: "[A-Z]{3,4}",

                  }}
                />**

Version

nextjs-material-kit-pro-v1.1.0

Reproduction link

http://localhost:3000/academics/class

Operating System

Windows

Device

Laptop

Browser & Version

Version 83.0.4103.106

Steps to reproduce

Create a link to a page using next/link, lets say you have three pages
Page 1 ( on page I have a link like To Page 2 )
Page 2 - on page 2 redirect to page 3 like router.push('/page3')
Page 3 - Issue is here content loading is not being loaded successfully

Now you click on To Page 3 link if render page 3 but with content loading progress at the top shown in the attached image

What is expected?

Page 3 should be loaded successfully

What is actually happening?

Content loading is being displayed on the page forever with following error in the console log
index.js:1 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.

Solution

No Idea

Additional comments

Version

1.3.2

Reproduction link

https://demos.creative-tim.com/nextjs-material-kit-pro/presentation

Operating System

N/A

Device

N/A

Browser & Version

N/A

Steps to reproduce

N/A

What is expected?

The heading tags should be following an order by hierarchy.
The title, description and other meta tags shouldn't be the same for all pages.

What is actually happening?

Not SEO friendly.

Solution

Additional comments

Version

1.0.0 (according to package.json)

Reproduction link

https://www.creative-tim.com/new-issue/nextjs-material-kit-pro

Operating System

mac os

Device

MacBook pro

Browser & Version

chrome 80.0.3987.149 (Official Build) (64-bit)

Steps to reproduce

Go to the ecommerce demo page (link above)

• Hover over the filter choices in the sidebar on the left

• The hover only partially shows, it's clipped along the left hand side

• Click on an item

• the ripple is similarly obscured, clipped along the left hand side

What is expected?

Should see the full circle of hover/ripple

What is actually happening?

It's obscured by the block to the left

Solution

Presumably I need to change the relative zIndexes - but initial tests haven't worked

Additional comments

Version

1.2.0

Reproduction link

https://ntg-sveltekit.azurewebsites.net

Operating System

linux

Device

any

Browser & Version

edge@latest, firefox@latest, chrome@latest

Steps to reproduce

Navigate to the site... View in responsive mode... Look at the site in mobile phone form factors

What is expected?

The banner would remain visible as in all other form factors

What is actually happening?

The banner and the header section display on top of each other

Solution

Additional comments

Version

1.2.0

Reproduction link

https://github.com/creativetimofficial/ct-nextjs-material-kit-pro

Operating System

OS X 11.5.2

Device

MacBook Pro

Browser & Version

v16.2.0

Steps to reproduce

1. Download kit (react link)
2. Do npm install (--force)

What is expected?

Npm install completes successfully

What is actually happening?

lots of errors:
npm ERR! gyp ERR! node -v v16.2.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

Solution

Additional comments

Hi where can i put in api key for google maps?

What is your enhancement?

We are trying to refactor a React app into a Nextjs app and we thought it would be a lot easier to code and refactor if the _index and _app components were already in a modern, functional format - instead of being older class components. This is just an easy and minor change, but it will be a huge improvement. I hope that you will seriously consider this. Thanks!

Please help me out here, I paid $200 for the winter bundle and the main product I needed from there doesn't even work.

Registered an issue with [email protected] but encountered the following errors.

1. open https://demos.creative-tim.com/nextjs-material-kit-pro/login

screensize >960 login div is sized too small

https://ibb.co/NypyT0r
https://ibb.co/Y3jjrc9

thx for checking

Device: Mac / Chrome / Safari

Version

1.0.0

Reproduction link

Operating System

OSX, iOS

Device

MacBook, iPhone

Browser & Version

Latest updates on both devices

Steps to reproduce

1. Install like the creative tim docs say.
2. Visit page in Safari.
   Use iPhone or set User-Agent to iPhone, if the bug does not show directly on desktop Safari.
   Sometimes it will only show after one or two page reloads.

What is expected?

The presentation page without issues.

What is actually happening?

There is a grey bar on top.
Most of the components are not displayed at all.
Most of the proportions are quirked.
The main-card is cut of like this for example.

Solution

Additional comments

The code is untouched, I did not make any changes.
While in development mode everything is working fine, but local in production mode or remote deployment with Zeit/Now shows the bug.

Version

1.2.1

Reproduction link

http://example.com/no/minimal/repro

Operating System

Windows 10

Device

Dell laptop

Browser & Version

No browser

Steps to reproduce

Download v1.2.1 and unzip it
in folder run "npm install"

What is expected?

the install succeeds

What is actually happening?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @material-ui/core@"4.11.4" from the root project

Solution

No current solution. I installed using --legacy-peer-deps but I'm wary abut doing so.
I guess I could change package.json to load the last v17 of react.

Additional comments

As I understand it material-ui/core doesn't work with react 18. And I believe react 18 has some breaking changes, and it only works material v5. So I don't see how this will work.

Version

1.3.1

Reproduction link

https://www.creative-tim.com/new-issue/nextjs-material-kit-pro

Operating System

macOS monterey version 12.6

Device

macbook pro

Browser & Version

Chrome Version 108.0.5359.124 (Official Build) (x86_64is up to date)

Steps to reproduce

cd kit
npm run dev
go to localhost:3000
visit different pages
turn on inspect console

What is expected?

free of errors and a few warnings

What is actually happening?

navigating the pages for 3 minutes, I see 19 errors and 62 user messages.

Solution

The warnings are all related to react 18 no longer supporting ReactDom.render so it should be a quick fix in your next release. The errors seem to be caused by including google map api multiple times causing issues and some other issues related type errors.

Additional comments

I also have a few other questions:

1. I use next 13 in my own application and I see you are at next 12. Do you anticipate problems when I integrate some of your components?
2. the absolute path reference link in the document does not describe what strategy you use. I think it is a great thing to use absolute path. Could you please be specific about how you implemented the absolute path in your app? Thanks so much for the beautiful design and app!
3. the file structure on the document is no longer accurate after you moved files to the public folder
4. do you have a roadmap for future releases? I am particularly interested in when the nextjs 13 will be online.

Version

1.2.0

Reproduction link

https://demos.creative-tim.com/nextjs-material-kit-pro/components

Operating System

Windows 10

Device

Chrome

Browser & Version

90.0.4430.212 64bit

Steps to reproduce

1. Open dropdown of multiselect input
2. Click on any option
3. Repeat 2 on other option if it didn't work

What is expected?

The option is selected, dropdown menu is staying in place

What is actually happening?

The option is indeed selected, but menu jumps for whatever reason. If menu has greater amount of inputs, the 'jump' might be pretty huge.

Solution

Additional comments

Version

1.2

Reproduction link

https://www.creative-tim.com/

Operating System

npm

Device

mac

Browser & Version

chrome

Steps to reproduce

just install it with npm install

What is expected?

When using v1.2 there is some conflict between react-animate-on-scroll and react library.

I attach the detail about it.

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 15.4.1 < 17.0.0-0" from [email protected]
npm ERR! node_modules/react-animate-on-scroll
npm ERR! react-animate-on-scroll@"2.1.5" from the root project

What is actually happening?

I solve this problem by install with force option, but I have some worry about it.

Is it okay to install with force option?

Solution

Additional comments

Passing the native property to the Select component, there are no styles for this property since it is not based on the hidden input, the event needs to be handled.

None of the links at the bottom of the docs work.

https://demos.creative-tim.com/nextjs-material-kit-pro/documentation/inputs

What is your enhancement?

Please can you add an autocomplete custom input? In case that I want to search something that could be preloaded. It's posible? Thanks

Version

1.3.1

Reproduction link

https://www.creative-tim.com/new-issue/nextjs-material-kit-pro

Operating System

macOS monterey version 12.6

Device

macbook pro

Browser & Version

Chrome Version 108.0.5359.124 (Official Build) (x86_64is up to date)

Steps to reproduce

download the kit

cd kit
npm install
build next

What is expected?

should build successfully

What is actually happening?

adena% next build
info - Linting and checking validity of types
info - Creating an optimized production build
Failed to compile.

./styles/scss/nextjs-material-kit-pro.scss
To use Next.js' built-in Sass support, you first need to install sass.
Run npm i sass or yarn add sass inside your workspace.

Learn more: https://nextjs.org/docs/messages/install-sass

Build failed because of webpack errors

Solution

npm run build
see the screen output
adena% npm run build

[email protected] build
next build

info - Linting and checking validity of types ..warn - No ESLint configuration detected. Run next lint to begin setup
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app. This does not opt-out pages with getStaticProps
Read more: https://nextjs.org/docs/messages/opt-out-auto-static-optimization

info - Collecting page data
Route (pages) Size First Load JS
...

(Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)

Additional comments

I encountered this issue when using "build next", it can be overcome using "npm run build". It is just strange that npm run build actually executes next build.

I am just concerned about the webpack errors.

Please note, I don't have a reproducible example because it is your own code base. I just ordered it and wanted to see if it can build.

Version

1.2.0

Reproduction link

It's the out of the box ZIP file.

Operating System

Windows 11

Device

Dell XPS 15

Browser & Version

N/A

Steps to reproduce

• Download the ZIP file of the theme
• Extract zip file into a folder
• Run npm install:clean or npm install

What is expected?

Things are installed and I can run the app

What is actually happening?

npm install:clean fails on windows because it uses the rm -rf command which is not a valid command on windows. npm install fails because of an issue with gyp installing node-sass. Updating the version of node-sass from v5 to v6 appears to break a rule somewhere and then fails for that reason.

Solution

For the issue with install:clean, you may want to create a separate command for windows users that uses a natively available command; alternately, I think some projects previously made use of the rimraf package for this, though my memory is shaky there.

Additional comments

Surprised to see how out of date some of the libraries are in the theme. I'd expect a purchased product to be using the latest libraries for a fresh start, not versions from a year ago; or at least kept up with the latest bugfix/patch releases. Was hoping to use this product to give myself a jump start; instead I had to spend time trying to fix it.

Version

1.2.0

Reproduction link

https://github.com/creativetimofficial/nextjs-material-kit

Operating System

MacOS

Device

Macbook

Browser & Version

Chrome Version 96.0.4664.110

Steps to reproduce

1. npm install (Fails)
2. npm i -g yarn
3. yarn install (Fails)

npm fails complaining about the React version.

Yarn fails running node-sass

What is expected?

Dependencies install properly so I can work on the template I paid for.

What is actually happening?

Install fails.

Solution

Additional comments

Version

1.0

Reproduction link

https://github.com/zeit/next.js/blob/master/errors/opt-out-auto-static-optimization.md

Operating System

Mac

Device

mac

Browser & Version

any

Steps to reproduce

npm run build

What is expected?

After updating to nextjs version 9.3 there are some problems. nextjs has implemented Next-gen Static Site Generation (SSG) Support
and the getInitialProps is replaced by new functionality.

What is actually happening?

The error message is
Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app.
Read more: https://err.sh/next.js/opt-out-auto-static-optimization

Solution

Update the NextJS Material Kit PRO to reflect changes in nextjs 9.3

Additional comments

Version

n.a.

Reproduction link

https://demos.creative-tim.com/nextjs-material-kit-pro/documentation/styles

Operating System

OS

Device

MacBook Pro

Browser & Version

Chrome 79.0.3945.130

Steps to reproduce

1. Go to https://demos.creative-tim.com/nextjs-material-kit-pro/documentation/styles
2. Read the third line of the documentation.

We've decided to use the makeStyles function from Material-UI to override some of thier styles.

What is expected?

Expecting to read the word "their"

What is actually happening?

Reading the word "thier"

Solution

Fix the typo by replacing the word "thier" by the word "their"

Additional comments

Version

1.0.0

Reproduction link

https://jsfiddle.net/#&togetherjs=HMQxCQ5Izo

Operating System

Apple

Device

Mac Book Pro

Browser & Version

Chrome 80.0.3987.162

Steps to reproduce

I've installed the product as directed in the documentation. I'm using the default NextJS "hello-nextjs" application.
I've created a project level next.config.js file and included all items from the next.config.js within the project folder next-js-material-kit-pro-v1.0.0.
I've installed all necessary components from next.config.js
It appears the next.config.js copied is set to utilize absolute paths as described in the documentation

What is expected?

I should be able to include components in the index file and produce them.

What is actually happening?

I'm getting an error: Module not found: Error: Can't resolve 'assets/jss/nextjs-material-kit-pro/components/badgeStyle.js' in '/Users/linaar/repos/hello-next/nextjs-material-kit-pro-v1.0.0/components/Badge'

All of the folders and assets are present as expected. It appears that the index is picking up the actual component reference but then I get this error.

Solution

Additional comments

I can provide the whole project if necessary. It's just the most basic nextjs startup application.

Version

1.1.0

Reproduction link

https://www.creative-tim.com/new-issue/nextjs-material-kit-pro

Operating System

OSX

Device

Mac Book Pro

Browser & Version

Chrome 89.0.4389.90

Steps to reproduce

1. Bump next-images to 1.4.0 or higher
2. Build nextjs-material-kit-pro app
3. Get the following error:

error - ./assets/scss/nextjs-material-kit-pro.scss?v=1.1.0
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

What is expected?

Successful build

What is actually happening?

Build fails with:

error - ./assets/scss/nextjs-material-kit-pro.scss?v=1.1.0
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Solution

Additional comments

I don't know how to provide a basic reproduction without standing up the entire project.
Seeing as how the next-images README advertises this theme I think this should be a priority.

Version

1.3.1

Reproduction link

https://creative-tim.com/

Operating System

Windows 10

Device

Desktop

Browser & Version

Microsoft Edge 109.0.1518.70

Steps to reproduce

1 - Click an item on the Header menu

What is expected?

The menu should appear under the button (item) that was clicked.

What is actually happening?

appears in the middle of the button (item), hiding the same

Solution

Additional comments